4.框架層 界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)贪绘、信息設(shè)計(jì)界面設(shè)計(jì)
界面設(shè)計(jì):提供用戶做某些事的能力税灌,通過(guò)它苞也,用戶能真正接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì) 中”確定的“具體功能粘秆。”
導(dǎo)航設(shè)計(jì):提供給用戶去某個(gè)地方的能力氓涣,通過(guò)它劳吠,用戶可以在結(jié)構(gòu)中自由穿行痒玩。
信息設(shè)計(jì):給用戶傳達(dá)想法蠢古〔菅龋跨越了“以任務(wù)為導(dǎo)向”的功能型產(chǎn)品和以“信息為導(dǎo)向”的信息型產(chǎn)品的邊界炉菲。是界面設(shè)計(jì)和信息設(shè)計(jì)的基礎(chǔ)拍霜。
界面設(shè)計(jì)
? ? ? 選擇正確的界面元素。這些界面元素能幫助用戶完成他們的任務(wù)越驻,還能通過(guò)適當(dāng)?shù)姆椒ㄗ屗鼈內(nèi)菀妆焕斫夂褪褂玫劳怠D男┕δ茉谀膫€(gè)界面上完成试疙,是我們?cè)诮Y(jié)構(gòu)層的交互設(shè)計(jì)中決定的抠蚣;而這些功能在界面上如何被用戶認(rèn)知到,則屬于界面設(shè)計(jì)的范疇距贷。設(shè)計(jì)復(fù)雜系統(tǒng)的界面所面臨的最大挑戰(zhàn)之一:弄清楚用戶不需要知道哪些東西忠蝗,并減少它們的可發(fā)現(xiàn)行阁最。界面設(shè)計(jì)可以采用各種各樣的技巧速种,使用戶完成目標(biāo)的過(guò)程變得容易低千。一個(gè)簡(jiǎn)單的技巧示血,在這個(gè)界面第一次呈現(xiàn)給用戶的時(shí)候难审,仔細(xì)考慮每一個(gè)選項(xiàng)的默認(rèn)值告喊。
復(fù)選框(checkbox):允許用戶獨(dú)立地選擇各個(gè)選項(xiàng)葱绒。
單選框(radio button):允許用戶從一組互斥的選項(xiàng)中選擇一個(gè)地淀。
文本框(text field):允許用戶---等待著用戶---輸入文字。
下拉菜單(dropdown list):在緊湊的空間中实苞,讓用戶從一組互斥的選項(xiàng)中選擇一個(gè)黔牵。
多選菜單(list box):在緊湊的空間中猾浦,允許用戶獨(dú)立地選擇各個(gè)選項(xiàng)金赦。
按鈕(action button):告訴體統(tǒng)接受用戶通過(guò)其他界面元素提交的所有信息,并用這些信息來(lái)做一些事情---采取動(dòng)作绳慎。
導(dǎo)航設(shè)計(jì)
滿足3個(gè)要點(diǎn)
1.給用戶提供一種在網(wǎng)站間跳轉(zhuǎn)的方法杏愤。
2.傳達(dá)出導(dǎo)航與他們所包含內(nèi)容之間的關(guān)系声邦。
3.傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)面之間的關(guān)系
假設(shè)用戶不會(huì)將上一頁(yè)的信息帶到下一頁(yè)中亥曹。
1.全局導(dǎo)航:提供了覆蓋整個(gè)網(wǎng)站的通路
2.局部導(dǎo)航:提供給用戶在這個(gè)架構(gòu)中到“附近地點(diǎn)”的通路媳瞪。
3.輔助導(dǎo)航:提供了全局全局導(dǎo)航或局部導(dǎo)航不能快速到相關(guān)內(nèi)容的快捷途徑蛇受,提供了一些分類方面的好處兢仰,同時(shí)能保持網(wǎng)站的主要層級(jí)結(jié)構(gòu)。
4.上下文導(dǎo)航:嵌入頁(yè)面自身內(nèi)容的導(dǎo)航忆矛,即文本的超鏈接導(dǎo)航。
5.友好導(dǎo)航:提供給用戶他們通常不會(huì)需要的鏈接洽议。
6.網(wǎng)站地圖:作為網(wǎng)站的一個(gè)分級(jí)概要出現(xiàn)亚兄,提供所有以及導(dǎo)航的鏈接,并與縮進(jìn)顯示的采驻、主要二級(jí)導(dǎo)航鏈接起來(lái)审胚。
7.索引表:按字母順序排列的匈勋、鏈接到相關(guān)頁(yè)面的列表。
信息設(shè)計(jì)
信息設(shè)計(jì)的分類依據(jù):1.反應(yīng)用戶的思路菲盾,2.支持用戶的任務(wù)和目標(biāo)颓影。由于界面不僅僅只是用來(lái)收集用戶信息各淀,它還需要向用戶呈現(xiàn)信息懒鉴,所以信息設(shè)計(jì)在解決界面設(shè)計(jì)的問(wèn)題中扮演重要角色。
指示標(biāo)示
用來(lái)幫助用戶理解“他們?cè)谀摹薄八麄兡苋ツ摹?/p>
圖標(biāo)碎浇、標(biāo)簽系統(tǒng)和排版是另外的信息設(shè)計(jì)方式临谱,有時(shí)幫助用戶加強(qiáng)“你在這里的”感覺(jué)奴璃。
線框圖
線框圖/頁(yè)面示意圖:將信息設(shè)計(jì)、界面設(shè)計(jì)和導(dǎo)航設(shè)計(jì)防止在一起,形成一個(gè)統(tǒng)一的、有內(nèi)在凝聚力的架構(gòu)的地方僵蛛。
線框圖是整合在框架層的全部三種要素的方法:
1.通過(guò)安排和選擇界面元素來(lái)整合界面設(shè)計(jì)
2.通過(guò)識(shí)別和定義核心導(dǎo)航系統(tǒng)來(lái)整合導(dǎo)航設(shè)計(jì)
3.通過(guò)防止和排列信息組成部分的優(yōu)先級(jí)來(lái)整合信息設(shè)計(jì)喉酌。
5.表現(xiàn)層 感知設(shè)計(jì)
表現(xiàn)層:解決“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題相速。
視覺(jué)
視覺(jué)設(shè)計(jì)應(yīng)關(guān)注的點(diǎn):
應(yīng)該把注意力集中在設(shè)計(jì)的“運(yùn)作是否良好”
之前就確定的目標(biāo),視覺(jué)設(shè)計(jì)應(yīng)的支持如何?
忠于眼睛
評(píng)估一個(gè)產(chǎn)品視覺(jué)的簡(jiǎn)單方法:你的視線首先落在上面地方?哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引用戶的注意力?他們是對(duì)于戰(zhàn)略目標(biāo)來(lái)講很重要的東西嗎?或者用戶第一時(shí)間注意到的東西與他們的目標(biāo)是背道而馳的么?
如果你的設(shè)計(jì)師成功的,用戶眼睛的移動(dòng)軌跡應(yīng)該滿足一下兩點(diǎn)
1.有一條流暢的路徑指引用戶
2.這條路徑引導(dǎo)用戶去完成某個(gè)目標(biāo)和任務(wù)。
對(duì)比和一致性
對(duì)比是一個(gè)重要手段,能幫助用戶理解頁(yè)面導(dǎo)航元素之間的關(guān)系。對(duì)比還可以傳達(dá)信息設(shè)計(jì)中的概念群組。一致性:能使你的設(shè)計(jì)有效得傳達(dá)信息,而不會(huì)導(dǎo)致用戶迷惑或者焦慮恬汁。
基于柵格線:使用“母版”來(lái)確保設(shè)計(jì)的一致性约巷。
內(nèi)部和外部的一致性
內(nèi)部產(chǎn)品和外部產(chǎn)品不統(tǒng)一
解決辦法:確定有可能在產(chǎn)品各種各樣的界面囚聚、導(dǎo)航和信息設(shè)計(jì)等不同環(huán)境中反復(fù)出現(xiàn)的設(shè)計(jì)元素料皇,進(jìn)行一個(gè)方案設(shè)計(jì),病將這個(gè)方案應(yīng)用到整個(gè)產(chǎn)品中去军洼。
配色方案和排版
核心的配色方案通常是一個(gè)更廣泛的配色方案的一部分甘桑,這套配色方案要在一個(gè)企業(yè)的所有材料中得到應(yīng)用德谅。對(duì)比和一致性對(duì)于創(chuàng)建配色方案也扮演了重要角色。
排版:字體的選擇
設(shè)計(jì)合成品和風(fēng)格指南
風(fēng)格指南:匯總確定了視覺(jué)設(shè)計(jì)的每個(gè)方面惫确,從最大到最小的范圍的所有元素揍鸟,比如設(shè)計(jì)柵格谈撒、配色方案、字體標(biāo)準(zhǔn)或標(biāo)志應(yīng)用指南
要素的應(yīng)用
創(chuàng)建良好的用戶體驗(yàn)最重要的內(nèi)容是大量收集亟待解決的非常細(xì)微的問(wèn)題溯乒。1.了解你正在試著去解決的問(wèn)題:你已經(jīng)知道主頁(yè)的紫色的大按鈕是個(gè)問(wèn)題,那這個(gè)問(wèn)題是表現(xiàn)層灯帮?框架層迎献?還是結(jié)構(gòu)層伴奥?2.了解這些解決辦法所造成的成果:在你的產(chǎn)品某個(gè)部分運(yùn)作得非常好的導(dǎo)航設(shè)計(jì)尼啡,可能完全不符合結(jié)構(gòu)層的另一個(gè)部分。
用戶體驗(yàn)的決策體現(xiàn)在這些場(chǎng)景之中:1.由現(xiàn)狀決定的設(shè)計(jì)。2.由模仿決定設(shè)計(jì)核畴。3.由領(lǐng)導(dǎo)決定的設(shè)計(jì)膝但。
必須要同時(shí)考慮五個(gè)層面的全部因素,這是對(duì)創(chuàng)建成功的用戶體驗(yàn)至關(guān)重要的谤草。
面對(duì)哪些設(shè)計(jì)用戶體驗(yàn)時(shí)需要解決的糾纏不清的小問(wèn)題跟束,有時(shí)會(huì)是一件令人氣餒的事情。有時(shí)需要作出妥協(xié)并評(píng)估利弊進(jìn)行取舍丑孩,也很容易讓人沮喪冀宴、懷疑。正確的做法是:每一個(gè)決定都建立在對(duì)其背后議題理解的基礎(chǔ)之上温学,問(wèn)自己:你為什么要這么做略贮?
用戶體驗(yàn)設(shè)計(jì)是一場(chǎng)馬拉松,可能在短期內(nèi)花費(fèi)一定的時(shí)間,但是它們將在一個(gè)更長(zhǎng)時(shí)期中節(jié)省更多的時(shí)間逃延。