• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 灰色在Web交互設計中的應用—- 其他教程




    教學主題: 灰色在Web交互設計中的應用

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 灰色在Web交互設計中的應用

    這教學的重點為這幾點 [ 應用,設計,交互,灰色,Mr.Gray,信息,操作,用戶,進 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    在設計師中,灰色被應用的場合十分廣泛,由於顏色本身的性質決定,使得灰色能與任何其他顏色相搭配。

    在設計師中,灰色被應用的場合十分廣泛,由於顏色本身的性質決定,使得灰色能與任何其他顏色相搭配。同樣在web交互設計中我們也會十分關注顏色對於用戶的影響。其中灰色也就成為關注度較高的顏色之一,雖然在很多場合它並不起眼,但確實很多應用中都離不開它。

    在進行Web的交互設計中,顏色信息的傳達也是不可或缺的一部分。我們常會發現許多“灰色”的應用,他們的出現總是不動聲色而又恰如其分,維持了整個頁面的平衡與統一。本文將從一些實際案例出發,闡述“灰色”在Web交互設計中的8類應用。

    首先讓Mr.Gray 來做個簡單的自我介紹吧:

    狹義的 Mr.Gray

    狹義的Mr.Gray, 是指沒有色相與純度,只有明度,將黑色和白色混和而成的一種中間色。 依據不同分類方法可大體分為淺灰與深灰兩種,亦可分為暖灰與冷灰。

    相對來說,其特徵為視認性不高,經久耐看,不因過份的鮮明而刺眼,中立而溫和。

    灰色在Web交互設計中的應用

    圖例暖灰與冷灰

    廣義的 Mr.Gray

    廣義的Mr.Gray是指一切具有中性、溫和、不鮮明的現象與事物。在下文中所指的Mr.Gray,均指的是廣義的Mr.Gray。

    如果把所有的顏色混在一起,會是什麼顏色?其實Mr.Gray 並不孤獨。

    Mr.Gray是一位相當有魅力的紳士。閱歷越深,就越能懂得他的價值。

    Mr.Gray好比是形狀中的圓角,可以調和一些矛盾,使得它們不再尖銳。

    下面讓我們來看看大家對Mr.Gray的印象吧:

    灰色在Web交互設計中的應用

    Mr.Gray在Web 交互設計中的8類應用

    Mr.Gray謙和內斂等特性決定了他在職業生涯中,大部分時間都在扮演輔助陪襯的角色。下文將以一些實際案例來進行詳細說明。

    1. 當前場景下禁用或不可操作

    這類設計處理的好處是避免用戶進行無效的操作,提高用戶的使用效率,並且給予一定的信息暗示。下圖中是一些禁用、不可操作或者沒有權限的圖例:

    灰色在Web交互設計中的應用

    灰色在Web交互設計中的應用

    灰色在Web交互設計中的應用

    2. 暗示一定秩序下,即將發生的步驟、事物

    此類設計可以讓用戶對即將進行的任務全局一目了然,較少而清晰的步驟不會給用戶帶來心理壓力,相反會促進用戶完成該項任務。如下圖中的創建QQ群的步驟預示。

    灰色在Web交互設計中的應用

    灰色在Web交互設計中的應用

    3. 弱提示,輔助信息(包括色彩信息)

    這一類應用較為廣泛,如大段輔助信息文字,一些提示信息,次要陪襯信息,不常用功能操作等,“灰色”處理會讓頁面和諧統一,並突出最主要的用戶體驗操作。如下圖1中,瀏覽照片為最首要體驗,上排對照片操作的工具欄則進行了“灰色”處理,mouseover時再變亮和豐富。

    灰色在Web交互設計中的應用

    再如一些登錄與搜索中的輔助說明與操作信息:

    灰色在Web交互設計中的應用

     

    灰色在Web交互設計中的應用

    4. 表示未被激活的“隱藏”狀態

    在Web設計當中,常需要考慮當前態、未被激活態等樣式。常見方式是灰色化處理未被激活態,在對比中使用鮮明的色彩告訴用戶當前所處的位置或狀態。

    灰色在Web交互設計中的應用

    下圖為igoogle聯繫人當前不在線時場景,使用了灰色icon來進行區分,這類設計在即時通信產品中較為普遍。

    灰色在Web交互設計中的應用
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    5. 次要可鏈接信息

    深色下劃線會給清爽的頁面帶來些許不和諧,“灰色”處理可以調和這種矛盾,既能準確傳達所需表達的信息,又能使得頁面整體和諧統一。

    灰色在Web交互設計中的應用
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    灰色在Web交互設計中的應用

    Apple在此的Web設計秉承了一貫的簡潔風格,使用簡單的一小段下劃線,卻傳達出了豐富的信息。

    灰色在Web交互設計中的應用

    6. 不鼓勵用戶進行的消極或危險操作

    下圖中Flickr的“封鎖”操作點擊后,會阻止該好友與你進行一切信息交換與互動,該操作的“灰色”處理恰好可以輔助表達出這層隱含的意思。

    灰色在Web交互設計中的應用

    又如刪除整條標籤的icon。

    灰色在Web交互設計中的應用

    存儲與取消的操作,一個為亮色另一個進行“灰色”處理,這類應用在Web交互設計中應用十分普遍。

    灰色在Web交互設計中的應用

    這類應用與禁用使用場景的一些區別,在於鼠標mouseover時,會有響應,如鼠標變手型,對象變色等。

    7. 信息分隔

    常見的有下圖中的斑馬線,虛線,色塊等來區分不同信息區域。

    斑馬線 #FormatImgID_18#

    虛線分隔

    灰色在Web交互設計中的應用

    淺色塊區分標題與內容區

    灰色在Web交互設計中的應用

    8. Mr.Gray的相對性

    因為色彩具有明顯的相對性,而某些Web設計為保持整體風格的一致,甚至會將主要導航“灰色”處理,然而,這些處理都是相對的,也同樣可以做到主次分明。如下圖中wordpress的主導航。雖然導航當前態文字為灰色,但依靠淺色背景,相對而言還是更為突出的。只要把握住Mr.Gray的相對性,對其使用便能更加自如了。

    灰色在Web交互設計中的應用

    灰色在Web交互設計中的應用

    以上內容均為個人觀點與總結,有疑問歡迎共同討論和交流,若有不足之處還請不吝賜教。

    討論:http://www.missyuan.com/viewthread.php?tid=437961

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 灰色在Web交互設計中的應用 這教學會喜歡

    文章標題: 骨子愛創意- 灰色在Web交互設計中的應用–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 應用,設計,交互,灰色,Mr.Gray,信息,操作,用戶,進

    本文永久連結 :灰色在Web交互設計中的應用

    本文轉載自 :VIA