1、交互設計中的5項視覺指導原則關于交互設計，除了交互性z外，美感也是必耍的存在。今天火星時代就為你總結交互 設計中的5項視覺指導原則，幫助各位同學協調視覺美感和交互設計。下血我們就來逐一介 紹：我不想貶低文字的重要性，但也不想忽視視覺。兩者是同等重要的交互設計元素。文字 就是交互，但那些視覺元索（比如圖標、菜單、圖像等）才是用戶實際上操作的東西。雖然 有些可用性專家會提及craigslist甚至amazon,作為陋但可用（ifutl受歡迎）的網站案例。 但毫無疑問，美感總會有所幫助。情感是用戶體驗的關鍵：視覺設計優秀的網站能使用戶放松，提升可信度和易用性。考 慮到多數用八注意力短暫，認知往往成為

2、事實：如果視覺做得很糟糕，用八不會費神去深入 研究你的交互設計。讓我們來細說視覺的匝要性，因為它關系到交互，保證了清晰的方向指 引和一致性。一、尊重視覺的主導地位我們從案例展不開始。看看下而的文字：yellow很顯然，我們都知道“黃色”一詞所指的顏色。但當多數人看到它吋，他們理解到的可 能只冇紅色。文字的外觀取代了它的真止含義。信息圖專家david mccandless表明，我們 大部分的腦力資源都花在了視覺上。作為人類，視覺是我們的主要感觀。但是其他動物更多依賴聽覺與嗅覺，我們是視覺主 導的生物。正如數據記者兼信息圖專家david mccandless在一場引人入勝的ted演講中提 到的，我

3、們會調動全部感觀，但多數的腦力都花在了視覺上雖然我們很難察覺。他用計 算機進行了類比“視覺是感觀中最迅速的。它和計算機網絡的速度相同。之后是觸覺，相當于一個u 盤的速度。然后才是聽覺與嗅覺，約等于硬盤的速度。“后面才是可憐的味覺，運算速度兒乎近似便攜式計算器。介落里那個小方塊，百分z 0.7,那就是我們實際了解的量。所以你的很多感觀絕大多數感觀都是視覺上的，它蜂 擁而來你卻渾然不覺。”"視覺影響行為，也影響體驗”，stephen p. anderson說。但是對于交互設計這意味著什么？它意味著你對產品做出的每一項視覺上的決策，都對 交互有極人的影響，即使是在不知不覺間。產品設計顧問s

4、tephen p. anderson指出，視覺影響的不只是體驗，也會影響用戶的行為。 這就是說好的視覺設計可以捉升銷量，提高注冊量和轉化率，激發某些特定的用戶行為。看 看下面這兩個表單： 表單ap»oas« enrof your ema/fix 牝fw updares on yo(xcktfgfothershipping addrmbnamoselect state :card or account numbor:cart numberexpiration menth exptton yeor | 一 :zvcodo：phor>of1 phorto numlunite

5、d statescard vonsc«ior numberpkwwo now our crod<t card sowr ums an enhaxod address vofif«cb：»oc : us w procci$ your ortlef ” a bmo ba$«. gae proviso tho corroa bimxf® i than your btknq you wil bo oor(acted for venficabon.衣單brevolverkview confirmdeliviry optionspayment opt

6、ionssmippimc aoorfssordcp summarycovtuf usytfzhq wsmqu.zl, !3zcloo>a 尺 jcq kuukjm&um如3oe“iwy xbrkof gwwf oiu matrec ,5 accvt 7 up lor wtvnmrsavb and corrinub記住，交互設計的fl標z就是讓用戶盡可能少地思考。你認為哪個更有利于銷售？哪 個視覺上看更舒服？第一例中，那密集恐懼癥般的間距和過量的文字，讓用戶望而卻步。笫 二例則色彩豐富、優美，看起來更簡潔（盡管用戶都得輸入這些信息）。由于交互設計就是要創造人們想用的東西，冇吸引力的

7、事物更激發人的渴求，因此更能 發揮作用。spicessign upmwturtitkicuspiceshopb“nds. uhumn11mm uikuk& twkl kpeppersa ojciz-xr圖片和導航在這個在線香料商店中相互協調。不過除了吸引人的交互，優美的設計也提 供了i層額外的理解。看看上血這個old town spice shop案例，你會發現這個網站的櫥柜 式布局立刻暗示了這家公司的意圖和香料產品。盡管你可能會質疑，用戶先看到櫥柜還是“spices”和“exmcts”這些文字。毫無疑問 的是，兩者相互協調。二、提供清晰的方向與指引用戶不會漫無冃的瀏覽網站。人們通常都

8、有個大體概念他們耍去哪，但述需要一些指引 和線索。他們會在腦海屮創建地圖，既然我們剛剛提到人是視覺生物，那么就需要一些視覺 路標來指路。某種程度而言，傷的導航要像gps那樣。用戶需耍了解他們當前位置，哪些路線是可 行的，下一步該怎么做。面包屑導航是滿足上述3項需求的最直接的方式。就像f面的newegg這種常見的ui 模式，這種方式給用戶留下了清晰的視覺蹤跡，來追蹤他們的訪問過程。1 home > computer hardware > computer cases但面包屑導航應該作為備選方式，因為對于頁面間的點擊跳轉，它們在視覺上并不直觀。 它們多用于層級復雜的網站，比如電商網站，

9、簡單的網站不需要它。如果對此持疑，冋顧你 的網站地圖，看看加入面包屑導航能不能提升易用性，或者只是添亂。面包屑導航、鏈接還有菜單、搜索框和可點擊的圖標都是基于視覺的手段，讓 你建立方向和指引。談到主導航時，你需要讓它給人留下強烈的視覺印象。三、確保視覺統一一致性在交互設計的所有方面都非常重要，不只是視覺。無論如何，視覺上的不i致是 非常醒目的（看看世上最糟糕的網站），見證一下設計的地獄。h*上 a”前方高能預警！% elabqlla e1 皿 coming soon: an even worse site! look for rt somotime later, ovcmualtyl we p

10、romiseltraffic sutsself sctvte world*sel el el 5 usr wti>kji lo4mt lhrw|爍 48 worstendx rwww:wonrr*4$9.88/yr hosting + dorna get freedomainwith pery new movingdesignmrrgimjnk火xxmws ofvmpik gwgumacsmmjjt f wi 、xv lan kik 仃 11、! w2watch exm tbwd有些事是不該做的。一致性展現了網站在設計和排列方面的邏輯，創造更加令人愉悅的體驗（我們都知道, 開心的用戶是會

11、回頭的）。我們之前提過，人們更喜歡統一是因為它增加了可預知性（降低學習成本）。如果你的 界面容易學習，它也會更容易使用。人們不喜歡令人不快的驚喜，正如驚訝最小化原則中所 說：不一致引發的問題，是它增加了 “認知負荷”。nielson norman group的用戶體驗專家, kathryn whitenton,在熱議博文中解釋過，認知負荷是用戶在使用產品時需要思考的量。一致性展現了網站在設計和排列方面的邏輯。每項不一致都迫使用戶停下腳步，來處理此處不同所表達的含義，它為何不同，又是如 何影響他們的行為。因此，不一致的地方越少，交互越順暢，體驗越好。例如，單選按鈕在界而某部分只允許單選，那么它在

12、其他部分就不應該多選。文案也該 如此，既然在某個部分用了 “保存”作為名稱，在英他部分里就不該稱作“儲存”。如果某 張圖片觸發了一個彈窗，那它在別處就不該打開新窗口。時刻要問口己，“我希望用戶如何 操作？ ”四、將ui設計模式作為基準ui設計模式，可以理解為特定情況的最佳設計實踐。既然用戶已經熟悉各種設計模式, 使用它們降低了界面的學習曲線。常見的ui模式包括旋轉木馬、相關鏈接、幻燈片還 有更多（可以從這個網站看到，它致力于給它們分門別類）。netflix用了相關內容模式，來幫你找到其他町能感興趣的節冃。比如，netflix使用了 “相關內容” u1模式，幫助用八找到英他可能感興趣的電影或節

13、目。由于內容是智能牛成的，川戶交互感覺更像是有人在推薦有用的內容。這并不是一項開 創性的設計，但它是個快速有效的解決方案，讓你的界面鮮活起來。當然，ui模式并非即插即用的模塊，你還是得基于網站的外觀與感覺為它們特殊定制。 耍為產品尋找正確的模式，你可以查看各種模式庫，通過它們的分類來瀏覽各種模式, 比如“導航”或“輸入框”。今年，我們發布了兩個單獨的ui模式系列（還冇財富榜500 強金業的使用案例分析）：2014網頁ui設計模式和2014移動ui設計模式。五、通過風格指南創建一致性雖然ui模式有助于提升熟悉感，風格指南才能確保全站統一。風格指南是一部手冊，列岀了產品的特殊偏好，這些部分很難記憶

14、一一比如全站內容的 尺寸和字體、主導航的主色與輔助色的顏色梯度、按鈕點擊狀態的表現等等。add action links and statuses to pnoto box thumbnails with the »photo-boxinteractaction linksadd action links to the top left of a photo box.photo-box.actions photo-box_action-linkminor actions should appear on the right. photo-box_actionsright來這里www.yelp.co.uk/styleguide看看yelp的風格指南。在uxpin,更新網站時我們會創建風格指南。這能幫助我們估計出額外的丄作量，因為 我們可以把帶冇技術細節的截圖添加到公司內部wiki中。正如我們在從風格指南到效果圖 屮描述的，這種