成网站在线观看人免费_亚洲91还会玩转热点_老司机精品视频在线观看_国产av老师黑色丝袜美女_91久久青草精品38国产_成年人啦啦操软件_午夜福利在线资源_高清不卡的无码av_极品少妇高潮喷水_欧美国产日韩亚洲一二区

寫給大家看的Web設計(四)——交互&視覺設計

摘要:制定滿足可用性要求的視覺設計規范,創建獨一無二的品牌定位。

交互設計

交互設計和信息設計是不一樣的。這是一個非常容易引起混淆的概念。信息設計面對的問題是網站的全局性架構,如何以最好的方式組織內容,而“交互設計(Interaction Design)”考慮的則是實際的用戶操作流,用戶如何完成一個類似注冊成為會員的任務,或者是如何從一個頁面被引導到另一個頁面,抑或是購買了許多產品后如何完成付款的過程。

作為一名設計師,你需要完整地考慮用戶在完成某個任務過程中所有肯恩那個經歷的步驟。在這個過程的每一個步驟中,他們都會提出各種各樣的疑問和關切,你需要對此有心理準備,同時深入思考如何能夠促使他們圓滿地完成整個操作過程。如果步驟過于復雜,或者是界面表達不夠清晰,用戶可能會覺得煩躁進而放棄下一步操作。此外,正確地使用頁面組件,例如復選框、菜單、鏈接、圖表以及按鈕,他們的視覺外觀以及擺放位置都可能會增強或減弱用戶成功完成一次操作流的可能性。例如,如果你把“提交按鈕”放置在表單的左上角,那就會是一種非常罕見的擺放方式。用戶已經非常習慣在填寫完一份表單“之后”去表單下方尋找提交按鈕?;蛘撸憧赡軐⑻峤话粹o設計成一個文字鏈接,這樣導致的結果是用戶可能會認不出來那是提交按鈕——他們一定會想要尋找一個“看起來”像按鈕的東西。

視覺設計

完成一個流程的交互設計一方面要遵循常識,一方面也要考慮邏輯,尤其是落實到如何選擇控件以及在操作流中應用這些控件等細節時。剩下的就是視覺設計了。各部分的排版、歸類、相對位置,以及交互元素的設計是科學地組織工作流、規避可能出現的錯誤的前提。

我們通??梢酝ㄟ^使用一些設計組織方式和視覺策略來提升交互設計的易用性:

提供懸停反饋

顯示一個元素的可交互性有很多方式,例如更改它的外觀,或是當鼠標移上去的時候能夠觸發某些動作。當鼠標移到屏幕上的某個元素上時,我們稱之為“懸?!?。當鼠標滑過一個交互組件的時候,可以觸發很多動作,如:改變組件的外觀、讓元素放大或動起來。

設計外觀可交互的按鈕

如果你僅僅是依賴懸停反饋,那只能促使你的客戶不停地用鼠標掃過屏幕尋找可交互的元素而已。所以,將可交互元素設計得“看上去”可以點擊,才能夠成為操作流良好的開端。

從日常生活中獲取線索

你對交互組件的視覺設計和紋理能夠在某種程度上幫助用戶了解如果使用這個組件。有些物品時你每天都能夠接觸到的,例如按鈕、抽屜、撥號盤等,這些物品都能夠為你設計網頁上的交互元素提供很好的靈感來源。人們對于這些物品的使用機制已經非常熟練了——每個人都知道應該如何按下按鈕、拉動抽屜把手,或者是轉動撥號盤。

元素的聚合與嵌套

和任何視覺特性相類似,交互組件的相對位置和分類對于他們功能的暗示同樣起著很重要的作用。

(1) 聚集暗示著可交互。一系列文字或圖形元素聚焦在一起能夠創造出一個吸引人注意的視覺單元。即使這些元素集合沒有邊框,但是只要它們的位置排布在一起,并且有著相似的視覺風格,它們就會被看作是一組可交互元素。

(2) 聚焦暗示著相似的功能。視覺上將一系列鏈接聚焦在一起,給人的感覺是這些鏈接的功能應該十分相似,并且在整個網站范圍內的相對優先級基本差不多。

提供“你在這里”的反饋

當用戶瀏覽一個網站是,他們會想要有一個告訴他們身在何方的機制,以及,如果他們正處在某個人物流程當中,他們會希望知道這個流程還需要多久才能夠結束。為了回答這些問題,你的界面可以通過以下幾種方式提供“你在這里”的反饋。

(1) 高亮選中的導航項。當用戶選擇了一個導航項,即便是下拉菜單中的某一項,最好能夠保持被選擇的那個區域高亮,讓用戶知道他們正處于哪個區域。

(2) 展示進度。如果某人正在完成一個復雜的工作流,最好能有一個進度條能夠讓他們知道現在處于哪一個步驟,以及還需要多少操作才能完成這個操作流。

被高估的顏色編碼

“顏色編碼(Color-coding)”是指在你的網站中每一個板塊中都是用一種不同的顏色模式。顏色編碼唯一一個能夠起作用的環境是,你的網站只有數量不多的幾個區域,而你想非常鮮明地將這幾個區域分開。當只有3個板塊時,用戶還能比較好地將顏色及其對應的領域結合起來,這是,“顏色”本身被賦予了很清晰的含義。相反地,如果網站的模塊很多,顏色編碼就很容易出問題了——整個網站會變得很花哨,人們容易忽略顏色的差異。

一致性就是一切

當用戶第一次來到你的網站,他們會四處看看,尋找目標。理想狀況下,他們很快就會被網站的視覺設計和導航模式所吸引,開始順著正確的路徑尋找他們想要的內容。當用戶第一次花了時間了解你提供的界面和交互之后,他們就不會在想花時間去更改這一認知了——交互對于他們來說應該是“透明”的。

讓頁面子在用戶眼中變得熟悉和透明的最好方法是保持一致性。一旦你建立好了可點擊元素和不可點擊元素的視覺語言、決定了各個可交互元素在頁面上送出的位置之后,在網站的任何地方都要遵守這一點——無論是首頁還是隱藏最深的子頁面。

空間最大化

雖然網頁的空間非常非常有限,但你還是可以利用各種技術手段盡可能最大化地利用這些空間。如:

(1) 手風琴式導航。如果,允許不同的內容共享同一個空間。一般而言,它的標簽欄——不管是水平的還是豎直的——就像百葉窗一樣,每一頁都可以展開,顯示這個標簽所代表的內容。

(2) 在懸停時顯示新的內容。另一個慣常做法是通過鼠標懸停在元素上時顯示一個更大的圖片、更多的信息以及進一步的操作,一次來擴展導航組件。

(3) 輪轉。輪轉式交互能夠將若干個選項放置在一個固定的區域里。如果,通過水平或者豎直地在固定區域中循環滾動選項,用戶能夠看到所有的選項。

(4) 增強型下拉菜單。大部分人認為,所謂的下拉菜單就只是在主導航組件下方展開的要給文字鏈接列表。在下拉菜單中,你大可不必局限于文字列表,甚至可以在其中加入圖片等。

作者:麥稈創智  |  2015-08-08