UI設(shè)計-可用性及視覺要點(diǎn)

1、DesignUI設(shè)計基礎(chǔ)課程江南大學(xué)數(shù)字媒體學(xué)院UI設(shè)計基礎(chǔ)課程Contents目錄UI的概念、設(shè)計流程及設(shè)計原則iOS 8 UI界面設(shè)計在優(yōu)秀設(shè)計中學(xué)習(xí)UIPart OneUI的概念、設(shè)計流程、設(shè)計原則01UI即User Interface（用戶界面）的簡稱。UI設(shè)計則是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。從心理學(xué)意義來分，界面可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。用戶界面設(shè)計是屏幕產(chǎn)品的重要組成部分。界面設(shè)計是一個復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計學(xué)、

2、語言學(xué)等在此都扮演著重要的角色。用戶界面設(shè)計的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性。UI設(shè)計從工作內(nèi)容上來說分為3個方向。它主要是由UI 研究的3個因素決定的，其分別是研究工具，研究人與界面的關(guān)系，研究人。研究工具研究界面-圖形設(shè)計師Graphic UI designer美工，但實(shí)際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計師。這些設(shè)計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計教育背景，例如工業(yè)外形設(shè)計，裝潢設(shè)計，信息多媒體設(shè)計等。人與界面關(guān)系在圖形界面產(chǎn)生之前，長期以來UI設(shè)計師就是指交互設(shè)計師。交互設(shè)計師的工作內(nèi)容就是設(shè)計軟件的操作流程，

3、樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計，并且確立交互模型，交互規(guī)范。研究人任何的產(chǎn)品為了保證質(zhì)量都需要測試，軟件的編碼需要測試，自然UI設(shè)計也需要被測試。這個測試和編碼沒有任何關(guān)系，主要是測試交互設(shè)計的合理性以及圖形設(shè)計的美觀性。測試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶問卷的形式來衡量UI設(shè)計的合理性。一致性設(shè)計目標(biāo)軟件中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設(shè)計目標(biāo)需要一致。元素外觀交互元素的外觀往往影響用戶的交互效果。同一個（類）軟件采用一致風(fēng)格的外觀，對于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒有特別統(tǒng)

4、一的衡量方法。因此需要對目標(biāo)用戶進(jìn)行調(diào)查取得反饋。交互行為在交互模型中，不同類型的元素用戶觸發(fā)其對應(yīng)的行為事件后，其交互行為需要一致。對于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設(shè)計，會更加簡化用戶操作流程。設(shè)計流程確認(rèn)目標(biāo)用戶在軟件設(shè)計過程中，需求設(shè)計角色會確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計重點(diǎn)的不同。采集交互方式不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來源于其原有的針對現(xiàn)實(shí)的交互流程、已有軟件工

5、具的交互流程。當(dāng)然還要在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來。提示引導(dǎo)用戶軟件是用戶的工具。因此應(yīng)該由用戶來操作和控制軟件。軟件響應(yīng)用戶的動作和設(shè)定的規(guī)則。對于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進(jìn)行用戶需要的下一步操作。可用性可理解軟件要為用戶使用，用戶必須可以理解軟件各元素對應(yīng)的功能。如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應(yīng)的功能。可達(dá)到用戶是交互的中心，交互元素對應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過移動和觸發(fā)已有的交互元素達(dá)到其它在

6、此之前不可見或者不可交互的交互元素。要注意的是交互的次數(shù)會影響可達(dá)到的效果。當(dāng)一個功能被深深隱藏（一般來說超過4層）那么用戶達(dá)到該元素的幾率就大大降低了?？蛇_(dá)到的效果也同界面設(shè)計有關(guān)。過于復(fù)雜的界面會影響可達(dá)到的效果?？煽刂栖浖慕换チ鞒?，用戶可以控制?？刂乒δ艿膱?zhí)行流程，用戶可以控制。如果確實(shí)無法提供用戶控制，則用能被目標(biāo)用戶理解的方式提示用戶。必備品質(zhì)1.清晰清晰是用戶界面設(shè)計必須要具備的一條品質(zhì)，如果說你的界面設(shè)計的很模糊，用戶就無法在其中體驗(yàn)到較好的使用體驗(yàn)，這樣會影響用戶的整體印象。2.簡潔UI設(shè)計除了清晰還不夠，還需要簡潔，看上去一目了然。如果界面上充斥著太多的東西，會讓用戶在查找

7、內(nèi)容的時候比較困難和乏味，而簡潔的畫面就能很好的解決這個問題。3.熟悉這里說的熟悉是只在設(shè)計UI的時候，要遵守一定的設(shè)計規(guī)范，就如有下劃線的字符是有超鏈接的、叉號就是要退出或者刪除，這樣用戶在使用的時候不但有熟悉的感覺，而且便于操控。4.響應(yīng)良好的用戶界面設(shè)計一定要響應(yīng)迅速，不能讓用戶產(chǎn)生一種響應(yīng)較慢的感受。而且界面應(yīng)該有提醒的功能，讓用戶了解到一些反饋信息。5.一致在設(shè)計UI時，保持界面風(fēng)格的一致性也是整個應(yīng)用設(shè)計中很重要的環(huán)節(jié)，一致的風(fēng)格不會讓用戶有錯愕感。6.美觀美好的事物總會讓人有種愉悅之感，在頁面設(shè)計的時候也要注重美觀度的加強(qiáng)。側(cè)重流程 一個產(chǎn)品設(shè)計師的心得分享UI產(chǎn)品設(shè)計 心得AB

8、CPre-processDrawingsPicturesMoodboardWorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelinesPre-processDrawingsPicturesMoodboard可以專門用一個筆記本來收集你的創(chuàng)意，不時的翻翻，可能會找到一些非常有趣的舊想法，你可以根據(jù)這些舊點(diǎn)子想一些新創(chuàng)意。Pre-processDrawingsPicturesMoodboard一位藝術(shù)家必定是一位收藏家。他懂得品味藏品，而不是單純的貯藏， 他們懂得有選擇的去收藏。他們會根據(jù)自己內(nèi)心的喜好去收藏東西。還有一項

9、前期要做的工作就是要收集圖片，收集圖片的方法可能有好幾百種，我還是習(xí)慣最Old-School的方法Dropbox文件夾分類，每當(dāng)有新項目的時候，我就會看看這些圖片，用來尋找靈感。Pre-processDrawingsPicturesMoodboardDribbble，Behance，Pttrns，Pinterest我們有很多可以尋找靈感的地方。而且在這些網(wǎng)站中你很容易找到和你的項目相關(guān)的作品，多去看看，你可能會從別人的經(jīng)驗(yàn)中學(xué)會解決問題。當(dāng)我開始新項目的時候，我總會準(zhǔn)備四個文件夾PSD，屏，資源，靈感，我會把和這個項目相關(guān)的東西全部按照下面分類丟到文件夾里面。Pre-processDrawin

10、gsPicturesMoodboard不必在乎線框圖的質(zhì)量線框圖的作用就是讓彼此更好的理解目的，而不是最終結(jié)果。線框圖能夠幫助架構(gòu)層級，讓你了解大概需要多少屏界面。設(shè)計師必須懂得去“敏捷”設(shè)計，如果真的太在意線框圖的細(xì)節(jié)，那么整個設(shè)計流程會拉長，設(shè)計師應(yīng)該學(xué)會取舍。WorkWireframesCanvasFoldersUser-testingPSD大尺寸畫布最好用PS做一個大尺寸畫布，用來承載流程中的一些細(xì)節(jié)。大尺寸畫布不是用來畫出整個應(yīng)用的UI套件，而是用來記錄元素在不同階段的不同狀態(tài)也就是流程。設(shè)計復(fù)用很方便開發(fā)看到這種東西也會工作的更快。WorkWireframesCanvasFolde

11、rsUser-testing所有屏都放入一個PSD中在設(shè)計移動應(yīng)用時，我喜歡把整個流程中所有屏的界面設(shè)計全部裝入到一個PSD中整體的對比效果會更好，也更容易讓他人理解你的設(shè)計理念，元素的復(fù)用也非常方便。和朋友溝通我非常重視那些能夠給出專業(yè)反饋意見的人。留意他們的反應(yīng)和初次看到你的設(shè)計時的想法，這未嘗不是一種用戶測試。而且多聆聽別人的意見，能夠讓你從不同角度看待問題。WorkWireframesCanvasFoldersUser-testingPost-processDiagramGuidelines圖示用來暗示交互流程，且能充分感受到視覺設(shè)計的細(xì)節(jié)。Post-processDiagramGui

12、delines視覺規(guī)范完成了設(shè)計工作后，要做的事情就是做出一份視覺規(guī)范，然后檢查一下整體的視覺層級。UI 套件UI套件非常重要，尤其對于工作對接來說，能夠保持視覺高度的一致性。配色表字體表要完善的記錄LOGO使用的字體，標(biāo)題使用的字體等等，對于開發(fā)會大有裨益，個人復(fù)查作品時也會很有幫助。UI設(shè)計新手不可錯過的7條法則法則1：光線來自天空這可能是學(xué)習(xí) UI 設(shè)計時，最容易忽略卻又極為重要的一點(diǎn)了: 光線來自天空。光線總是從天空（上方）來的，從下面照上來的光看起來會非常詭異。當(dāng)光線從天上照下來的時候，物品的上端會偏亮，而下方會出現(xiàn)陰影。上半部分顏色淺一些，而下半部分深一些。從下面打一束光到人臉上是

13、不是看起來很滲人？UI 設(shè)計也是同理。我們的屏幕是平的，但是我們可以通過一些藝術(shù)手法讓它看起來是 3D 的，在每個元素的下方加一些陰影。就拿這個按鈕舉例，這是一個相對“扁平化”(flat) 的按鈕，但依然可以看出一些光線變化的細(xì)節(jié):沒有按下去的按鈕底部邊緣更暗，因?yàn)闆]有光線照到那里。沒有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個略有弧度的表面（見側(cè)視圖）。沒有按下去的按鈕下方有一些細(xì)微的陰影，在放大圖中看得更清楚。按下去的按鈕整體顏色都更暗了，但下半部分的顏色依然比上面深。這是因?yàn)榘粹o在屏幕的平面上，光線不容易照到。也有人說，在現(xiàn)實(shí)中，按下去的按鈕顏色更深，因?yàn)槭终趽踝×斯饩€。這

14、么一個簡單的按鈕就有 4 種不同的光線變化。實(shí)際上，我們可以把這種原則運(yùn)用到各處。iOS 6 有點(diǎn)過時了，但還是學(xué)習(xí)光線不錯的案例。這張圖是 iOS 6“勿擾模式”和“通知”的設(shè)置，看看上面有多少種不同的光線變化?？刂泼姘宓纳线吘売幸恍K陰影。“開啟”滑動槽上部也有陰影。“開啟”滑動槽的下半部分，反射了一些光線。按鈕是突出的，上邊緣較亮，因?yàn)槭桥c光源垂直的，接收了大量光線，折射到你的眼睛中。因?yàn)楣饩€角度的問題，分割線處出現(xiàn)了陰影。通常會內(nèi)嵌的元素：文字輸入框按下的按鈕滑動槽單選框（未選擇的）復(fù)選框通常會外凸的元素:未按下的按鈕滑動按鈕下拉控件卡片選擇后的單選按鈕彈出消息等等，現(xiàn)在不是追求扁平化

15、的設(shè)計嗎？iOS 7 引發(fā)了科技界對于“扁平化設(shè)計”(flat design) 的追求。也就是說圖標(biāo)是平的，不再模仿實(shí)物而外凸或內(nèi)凹，只有線條和單一顏色的形狀。我很喜歡這種干凈、簡潔的風(fēng)格，但是我認(rèn)為這種趨勢不會長久。通過細(xì)微的變化模擬出 3D 的效果非常自然，不會被完全取代的。在不久的將來，我們很可能會看到半扁平的 UI（這也是我推薦你使用的設(shè)計風(fēng)格）我把它稱為“flatty design”，依然非常干凈簡潔，但是也有一些陰影，有輕點(diǎn)、滑動、按下操作的提示?，F(xiàn)在，Google 也在各個產(chǎn)品上推行他們的 Material Design，提供一種統(tǒng)一的視覺設(shè)計語言。Material Design

16、 的設(shè)計指導(dǎo)為我們展示了它如何運(yùn)用陰影表現(xiàn)不同的層次。這也是我所認(rèn)同的類型。用現(xiàn)實(shí)世界的元素來傳遞信息，關(guān)鍵在于:細(xì)微。你不能說它沒有模仿現(xiàn)實(shí)世界，但也絕不是 2006 年的網(wǎng)頁風(fēng)格，沒有紋理，沒有梯度，更沒有光澤。我認(rèn)為“flatty”是未來的方向。扁平化？早晚會過時的。法則2：黑白優(yōu)先在上色前用灰度模式設(shè)計可以簡化大量的工作，讓你更加關(guān)注空間和元素布局。設(shè)計師現(xiàn)在都喜歡“移動優(yōu)先”的概念，這就意味著你要先考慮好在手機(jī)上如何顯示頁面，然后才考慮在超清的 Retina 屏幕上的顯示效果。這種限制非常好，能夠幫你理清思路。先解決一些棘手的問題（在小屏幕上顯示）。然后再解決簡單的問題（在大屏幕上的

17、可用性）。我希望你先用黑色和白色設(shè)計，先把復(fù)雜的問題解決了。在不借助顏色幫助的情況下把 app 做得美觀易用。最后再有目的地上色。這種方法能保持 app“干凈”、“簡潔”。加入過多的顏色很容易毀掉簡潔性?！昂诎變?yōu)先”會促使你關(guān)注空間、尺寸和布局這些更重要的問題。先來看一些經(jīng)典的用灰度模式設(shè)計的頁面?！昂诎變?yōu)先”法則并不適用于所有情況，比如運(yùn)動、卡通等有著鮮明特色的設(shè)計就需要好好地運(yùn)用各種顏色。不過，大部分app并沒有這樣鮮明的特點(diǎn)，只要保持干凈和整潔就好，絢麗的顏色被公認(rèn)是很難設(shè)計的，所以，還是先用黑色和白色來吧。第二步:如何上色上色最簡單的方法就是只加一種顏色。在灰色的基礎(chǔ)上只加一種顏色可以

18、簡單快速的吸引眼球和注意力。你也可以更進(jìn)一步，在灰色的基礎(chǔ)上加兩種顏色，或者添加統(tǒng)一色調(diào)的多種顏色。實(shí)踐中的顏色法則什么是色調(diào)？網(wǎng)頁主要用的是十六進(jìn)制 RGB 表。但 RGB 不是個好的顏色設(shè)計框架，HSB 模式會更好用，其中 H(hues) 表示色相，S(saturation) 表示飽和度，B（brightness）表示亮度。HSB 模式是比 RGB 模式更適合我們看待顏色的方式。如果你對這方面不太了解，以下是一些 HSB 模式簡單的入門知識。通過調(diào)整單一色相的飽和度和亮度，你可以生成各種不同的顏色深色、淺色、背景色、強(qiáng)調(diào)的地方、吸引眼球的地方等，但是又不會很扎眼。使用一種或兩種基礎(chǔ)色調(diào)的多

19、種顏色是強(qiáng)調(diào)和淡化某些元素，而又不把設(shè)計搞得一團(tuán)糟的最可靠的方法。關(guān)于顏色的其它幾點(diǎn)建議顏色是視覺設(shè)計中最復(fù)雜的。我從復(fù)雜的理論和長期的實(shí)踐中挑出了一些好的建議送給你:小工具箱：不要用純黑色：在現(xiàn)實(shí)世界中幾乎見不到絕對的黑色。調(diào)整不同的飽和度可以增加設(shè)計的豐富程度，也更接近現(xiàn)實(shí)世界。Adobe Color CC：尋找、調(diào)整、創(chuàng)造顏色組合的絕佳工具。在Dribble通過顏色搜索：尋找某種顏色如何搭配的好方法，非常實(shí)用，如果你已經(jīng)決定了要用那種顏色，可以通過顏色搜索看看世界頂級的設(shè)計師是如何配色的。法則3：增加空白空間為了讓UI看起來更加有設(shè)計感，留出一些空白的空間。在第 2 條法則中，我說到了黑

20、白優(yōu)先的原則，讓設(shè)計師在考慮顏色之前先想想空間和布局，那么現(xiàn)在我們就來說說如何安排空間和布局。HTML（超文本標(biāo)記語言HypertextMarkupLanguage，是用于描述網(wǎng)頁文檔的一種標(biāo)記語言）的默認(rèn)版式是這樣的：所有東西都堆在屏幕上，字號、行距都很小，段與段之間有一些間隔，但是也不是很大。這么布局實(shí)在是太難看了。如果你想設(shè)計出精美的UI，那就需要留出更多空白的空間。留白空間、HTML 和 CSS（層疊樣式表單），是一種用來表現(xiàn)HTML或 XML 等文件樣式的計算機(jī)語言。如果習(xí)慣用 CSS 來調(diào)整布局，那最好改掉這個壞習(xí)慣，因?yàn)?CSS 默認(rèn)是沒有留出空間的。試著把空白當(dāng)作默認(rèn)狀態(tài)，在空

21、白頁面添加各種元素。從沒有修飾過的 HTML 開始，先做好內(nèi)容，然后再做排版。下圖是 Piotr Kwiatkowski 設(shè)計的一個音樂播放器。請注意左側(cè)的菜單欄。字號是 12px，行間距有文字的兩倍高。再看看列表的名稱，“PLAYLISTS”和下劃線之間有 15px 的空白，播放列表名稱之間還有 25px 的間距。在頂部導(dǎo)航欄也有很大的空間，搜索圖標(biāo)和“Search all music”占到了導(dǎo)航欄高度的 20%。留白的空間收到了良好的效果，不同的元素有機(jī)的組合在一起，使得這個頁面成為最好的音樂播放器 UI 之一。大量的空白可以把混亂的界面做得簡潔美觀，比如這個論壇： 或者維基百科：很多人認(rèn)

22、為在維基百科的這個新頁面上，很多功能找不到了，但是你不能否認(rèn)這是學(xué)習(xí)頁面設(shè)計的一個好案例。在行之間留出空間。在各個元素之間留出空間。在各組元素之間留出空間。分析一下哪些是可行的。法則4：學(xué)會在圖片上呈現(xiàn)文字如果你想要成為好的 UI 設(shè)計師，你必須學(xué)會在圖片上美觀地呈現(xiàn)文字。優(yōu)秀的設(shè)計師在這方面做得都不錯，而水平較低的設(shè)計師往往在這方面也比較差，甚至完全不會。在學(xué)習(xí)了這部分以后，相信你會有很大的提升。方法0：直接在圖片上放文字直接在圖片上放文字時，有幾點(diǎn)需要非常注意：圖片應(yīng)該比較暗，而且顏色不能有太大的反差。文字必須是白色的，我知道你也能找到用其它顏色的案例。但是我覺得，你最好還是用白色。在不同

23、屏幕，不同尺寸的窗口調(diào)試頁面，確保各種情況下文字都是清晰、易于辨識的。上面這 3 個方面調(diào)整好就 OK 了，不要再做其它處理。方法1：暗化整張圖片可能在圖片上放文字最簡單的方法就是暗化整張圖片，如果原圖顏色不夠深，你可以用半透明的黑色在上面覆蓋一層，比如下面這個案例就加了一層不透明度 35% 的黑色。如果你直接放原圖，底色太亮，和文字的反差不夠明顯，看不清文字。類似的方法同樣適用于小圖。加一層黑色是最簡單、普適性最強(qiáng)的。當(dāng)然你也可以用其它合適的顏色，比如這樣：方法2：給文字加個框這是一種簡單有效的方法。在白色文字下方加上一個略透明的黑色方塊，就可以放在各種各樣的圖片上了，而且顯示效果非常清晰。

24、當(dāng)然，你也可以放別的顏色，只是需要小心謹(jǐn)慎。方法3：虛化圖片虛化圖片是增加文字易讀性的好方法，把文字下方的圖片虛化了，同時把虛化部分亮度調(diào)低。iOS 7 用毛玻璃的效果虛化了背景虛化圖片的方法也有局限性，你需要確保在不同屏幕上圖片尺寸調(diào)整后，文字依然是在虛化的區(qū)域上的。看看下面這個例子，你能看清小標(biāo)題嗎？真不知道這樣的設(shè)計是怎么通過審核上線的。方法4：底部褪色所謂底部褪色是將圖片的下邊緣變暗一些，然后在放上白色的文字。這是一種非常有獨(dú)創(chuàng)性的方法，我不知道在 Medium 之前有沒有人用過，但我是先在 Medium 上看到的。乍一看，你可能覺得這就是把文字放在了圖片上。其實(shí)不然，圖片上有一些非常

25、細(xì)微的變化，中間完全沒有黑色覆蓋，而底部有不透明度大約 20% 的黑色覆蓋在上面。這樣的變化很難看出來，但確實(shí)存在，而且確實(shí)提高了文字的可辨認(rèn)性。此外，Medium 還給文集圖片上的文字加了些許陰影，進(jìn)一步提高了文字的易讀性。最終的效果就是 Medium 可以把任何文字放在任何圖片上，閱讀體驗(yàn)非常好。有人可能會問了，為什么是把圖片的底部變暗呢？為什么不能是圖片的其它區(qū)域？要回答這個問題，請看法則1：光線來自天空。光線從上面照下來，圖片的上方亮一些，而底部較暗，看起來更自然。此外，你還可以把虛化和底部褪色結(jié)合起來，做出底部虛化的效果，比如下面這張圖的效果：方法5：把圖片部分區(qū)域的光線變得更柔和E

26、lastica 的博客的題圖并不是太暗，而且對比都較強(qiáng)。為什么文字的辨識度還這么高呢，就像下面兩張圖顯示的這樣：這里實(shí)際上是把圖片局部區(qū)域的光線變得更柔和，突出了文字。如果我們在瀏覽器上縮小 Elastica 博客，會看出到底發(fā)生了什么。在圖片左下角有一塊陰影區(qū)域，文字置于其上，就很容易辨認(rèn)了。這可能是在圖片優(yōu)雅呈現(xiàn)文字最細(xì)微的一種方法。我還沒在別處見過，保存下來，說不定將來什么時候就用到了。法則5：做好強(qiáng)調(diào)與弱化把文字設(shè)計得又美觀又得體通常就是通過放大或縮小文字，做出反差的效果。我認(rèn)為，UI 設(shè)計最困難的地方就在于文字的裝飾，因?yàn)樵O(shè)計文字時需要考慮的因素太多了：字號顏色字體粗細(xì)大小寫斜體字母

27、間距頁邊空白（準(zhǔn)確的說不是文字的一部分，但是容易影響閱讀時的注意力，所以也算在這個列表里了）下劃線 現(xiàn)在基本上等同于超鏈接了，我覺得你還是不要挑戰(zhàn)人們的常識比較好。文字背景色 這個有時候也被當(dāng)作超鏈接，只不過不是那么常見。就我個人經(jīng)驗(yàn)來說，當(dāng)我覺得一段文字設(shè)計的不好時，通常不是因?yàn)橛昧舜髮懽帜?，或者顏色太重，而是因?yàn)楦鞣N要素的搭配出了問題。強(qiáng)調(diào)和弱化你可以把所有的文字樣式分成兩類：增強(qiáng)可讀性的樣式：大字號、粗體、大寫等；減弱可讀性的樣式：小字號、與背景對比不明顯、空白較少等。上圖“Material Design”這個標(biāo)題就很突出：字號大、反襯明顯、字體較粗上圖頁腳的字就是弱化處理的，字號小、反

28、襯不明顯、字體較細(xì)我認(rèn)為文字設(shè)計的核心在于：標(biāo)題是唯一需要全部強(qiáng)調(diào)的元素，其它的部分則應(yīng)該將強(qiáng)調(diào)與弱化結(jié)合使用。如果網(wǎng)頁上某個元素需要強(qiáng)調(diào)，把強(qiáng)調(diào)和弱化結(jié)合在一起，可以避免整個頁面看起來太有壓迫感，同時又讓各個元素的呈現(xiàn)效果恰到好處。上面這張 BluHomes 的首頁堪稱是這方面的典范：上方文字較大，突出顯示，但是用了小寫字母。沒有給人強(qiáng)烈的壓迫感。網(wǎng)頁上的數(shù)字字號較大，是網(wǎng)頁上的重要信息。但是請注意，數(shù)字的字體很細(xì)，與背景色對比也不明顯；而數(shù)字下方的單位雖然寫得很小，卻全部加粗，用大寫字母。這就是設(shè)計中的平衡。通常情況下，改變字體大小、大小寫、粗細(xì)時會改變文字所占空間的大小，讓人們理解鼠標(biāo)正

29、懸停在這里。此外，下面這些要素也能夠影響人們的感受：文字顏色背景色陰影下劃線細(xì)小的動畫上升、下降等裝飾文字是非常難的，但是每當(dāng)我感到“這些文字不可能再變好看時”，我的判斷都是錯的。我需要做的就是不斷優(yōu)化，不斷嘗試。所以想開點(diǎn)吧，如果你設(shè)計出來的文字不好看，不要擔(dān)心，你需要不斷地提升自己的能力，讓自己變得更好。法則6：只用合適的字體有些字體很不錯，就用它們吧。有的網(wǎng)站很有個性，會用到比較特別的字體。但是，大多數(shù)產(chǎn)品的 UI 設(shè)計只要保持干凈、簡潔就可以了。所以，把那些太花哨的字體放到一邊吧。我希望你把這些字體下載下來，在你開始項目設(shè)計之前，瀏覽一下它們。Ubuntu（上圖）字體偏粗，對于有些 a

30、pp 來說太張揚(yáng)了，但是對于大多數(shù) app 來說還是不錯的。在 Google Fonts 上可以找到.Open Sans非常易于辯讀，是一款很流行的字體，用在正文非常合適，在 Google Fonts 上也能找到。Bebas Neue適合作標(biāo)題，都是大寫字母，在 Fontfabric 上能找到，這個網(wǎng)站上還有一些 Bebas Neue 的應(yīng)用實(shí)例。Montserrat只有兩種粗細(xì)，但也足夠了。是 Gotham 和 Proximate Nova 最好的免費(fèi)替代品，但不如那兩種好。在 Google Fonts 上能找到。Raleway適合作標(biāo)題，但不適合用于正文。有一個極細(xì)的版本（上圖沒有展現(xiàn)），

31、在 Google Fonts 可以找到。Cabin在 Google Fonts 可以找到。Lato在 Google Fonts 可以找到。PT Sans在 Google Fonts 可以找到。Entypo Social一個社交網(wǎng)絡(luò)圖標(biāo)集，在 E 上能找到。這里還有其它一些資源：Beautiful Google web fonts有Google Fonts的運(yùn)用實(shí)例，我經(jīng)常在這里找靈感。FontSquiirrel收集了不少可以免費(fèi)商用的好字體。Typekit如果你用Adobe Creative Cloud（也就是用Photoshop或Illustrator等），你就可以從Typekit中獲得包括

32、Proximate Nova在內(nèi)的大量字體。法則7：像藝術(shù)家一樣偷師我第一次坐下來試著設(shè)計按鈕、圖標(biāo)、彈窗等各個 app 元素時，我感到我對于什么是“好”知之甚少。但是我也很幸運(yùn)，我并不需要完全設(shè)計全新的 UI，因?yàn)橛泻芏鄡?yōu)秀的作品可以借鑒。下面列出一些資源，肯定會對你的設(shè)計非常有用 (按照重要性從高到低排列)1. Dribbble這個專為設(shè)計師而做的網(wǎng)站集合了網(wǎng)上最好的 UI 設(shè)計作品，在 Dribbble 上你能找到幾乎各種類型的案例。Victor Erixon有著非常明顯的個人風(fēng)格，非常厲害。他的作品很漂亮、簡潔，扁平設(shè)計。他做 UI 設(shè)計師已經(jīng) 3 年了，是這方面數(shù)一數(shù)二的人才。Foc

33、us Lab這些人是 Dribbble 中的名人，他們的作品非常多樣化，絕對是一流的。Focus Lab這些人是 Dribbble 中的名人，他們的作品非常多樣化，絕對是一流的。2. Flat UI Pinboard這里面有一些特別棒的手機(jī) UI 設(shè)計，你能找到很多精美的 UI 設(shè)計實(shí)例。3. Pttrns這里面有大量 app 截屏，它的一大好處在于，它是按照 UX 模式分類的，因此，你在搜索你手頭正在做的這一類作品時非常方便。我堅定地認(rèn)為每個藝術(shù)家初期都該像鸚鵡一樣，不斷的模仿和學(xué)習(xí)，直到能把頂尖的作品模仿得惟妙惟肖，然后再開始找到自己的風(fēng)格，引領(lǐng)新的潮流。所以，像個藝術(shù)家一樣偷師吧！Par

34、t TwoiOS 8 UI界面設(shè)計在優(yōu)秀設(shè)計中學(xué)習(xí)UI022.1 為iOS而設(shè)計（Designing for iOS） iOS 的革新關(guān)鍵詞如下： 遵從：UI能夠更好地幫助用戶理解內(nèi)容并與之互動，但卻不會分散用戶對內(nèi)容本身的注意力。 清晰：各種大小的文字應(yīng)該易讀，圖標(biāo)應(yīng)該醒目，去除多余的修飾，突出重點(diǎn)，很好地突顯了設(shè)計理念。 深度：視覺的層次和生動的交互動作會賦予UI新的活力，不但幫助用戶更好理解新UI的操作并讓用戶在使用過程中感到驚喜。2.1.1 以內(nèi)容為核心（Defer to Content） 雖然明快美觀的UI和流暢的動態(tài)效果是iOS體驗(yàn)的亮點(diǎn)，但內(nèi)容始終是iOS的核心。 這里有一些方法

35、，以確保你的設(shè)計能夠提升你的應(yīng)用功能體驗(yàn)并關(guān)注內(nèi)容本身。a，充分利用整個屏幕天氣應(yīng)用是最好的例子：漂亮的天氣圖片充滿全屏，呈現(xiàn)用戶所在地當(dāng)前天氣情況這最重要的信息，同時也留出空間呈現(xiàn)了每個時段的氣溫數(shù)據(jù)。b，盡量減少視覺修飾和擬物化設(shè)計的使用UI面板、漸變和陰影有時會讓UI元素顯得很厚重，致使搶了內(nèi)容的風(fēng)頭。應(yīng)該以內(nèi)容為核心，讓UI成為內(nèi)容的支撐。c,嘗試使用半透明底板半透明的控件比如控制中心關(guān)聯(lián)了使用場景，幫助用戶看到更多可用的內(nèi)容，并可以起到短暫的提示作用。在iOS中，透明的控件只讓它遮擋住的地方變得模糊看上去像蒙著一層米紙一樣它并沒有遮擋屏幕剩余的部分。2.1.2 保證清晰度（Provi

36、de Clarity）保證清晰度是另一個方法，以確保你的應(yīng)用中內(nèi)容始終是核心。以下是幾種方法，讓最重要的內(nèi)容和功能清晰，易于交互。 a,使用大量留白留白讓重要內(nèi)容和功能顯得更加醒目。此外，留白可以傳達(dá)一種平靜和安寧的視覺感受，它可以使一個應(yīng)用看起來更加聚焦和高效。b,讓顏色簡化UI一個主題色比如在記事本中使用的黃色讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時也給了一個應(yīng)用一個統(tǒng)一的視覺主題。內(nèi)置應(yīng)用使用家族化的系統(tǒng)顏色，無論在深色和淺色背景上看起來都干凈，純粹。c,通過使用系統(tǒng)字體確保易讀性iOS的系統(tǒng)字體自動調(diào)整行間距和行的高度，使閱讀時文本清晰易讀，無論何種大小的字號都表現(xiàn)良好。無論你是使

37、用系統(tǒng)或是自定義字體，務(wù)必使用動態(tài)型，這樣你的應(yīng)用可以在用戶選擇不同字號時做出應(yīng)對。d,使用無邊框的按鈕默認(rèn)情況下，所有bar上的按鈕都是無邊框的。在內(nèi)容區(qū)域，無邊框按鈕以文案、顏色以及操作指引標(biāo)題來表明按鈕功能。當(dāng)按鈕被激活時，該按鈕呈現(xiàn)高亮的淺色狀態(tài)來作為操作響應(yīng)。2.1.3 用深度來體現(xiàn)層次（Use Depth to Communicate） iOS經(jīng)常在不同的層級上展現(xiàn)內(nèi)容，用以表達(dá)分組和位置，并幫助用戶了解在屏幕上的對象之間的關(guān)系。 通過使用一個在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。2.2適應(yīng)性和布局(Adaptivity and Layout）2.2.1 在不同

38、環(huán)境提供良好體驗(yàn)（Provide a Great Experience in Each Environment）當(dāng)你使用自適應(yīng)來開發(fā)UI時，你可以保證UI跟隨顯示環(huán)境變化而適當(dāng)?shù)仨憫?yīng)。遵照這些指南，你可以給用戶良好的設(shè)備響應(yīng)體驗(yàn)。 a,在所有環(huán)境下都保持對主體內(nèi)容的專注b,避免布局上不必要的變化c,如果你的應(yīng)用只在一個方向上運(yùn)行，那么請直接一點(diǎn) 避免提示人們旋轉(zhuǎn)設(shè)備的提示UI出現(xiàn) 支持同一個方向上的變化d,如果你的應(yīng)用將設(shè)備方向翻轉(zhuǎn)視為用戶輸入（的一種指令），那么就按照程序設(shè)定的方式來響應(yīng)設(shè)備翻轉(zhuǎn)2.2.2 使用布局來溝通（Use Layout to Communicate）a,布局包含的不僅

39、僅是一個應(yīng)用屏幕上的UI元素外觀你的布局，應(yīng)該告訴用戶什么是最重要的，他們的選擇是什么，以及事物是如何關(guān)聯(lián)起來的。b,提升重要內(nèi)容或功能，讓用戶容易集中注意在主要任務(wù)上有幾個比較好的辦法是在屏幕上半部分放置主要內(nèi)容，以從左到右的習(xí)慣，從靠近左側(cè)的屏幕開始。c,使用視覺化的重量和平衡向用戶展示相關(guān)的屏顯重要元素大型控件吸引眼球，而比小的控件更容易在出現(xiàn)時被注意到。而且大型控件也更容易被用戶點(diǎn)擊，這讓它們在應(yīng)用中更加有用就像電話和時鐘（上面的按鈕）用戶經(jīng)常在容易分心的環(huán)境中能（正常）使用它們。d,使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序?qū)R讓應(yīng)用看起來整潔而有序，也讓用戶在專注于屏幕時更有

40、空間，從而專注于重要信息。不同信息組的縮進(jìn)與對齊讓它們之間的關(guān)聯(lián)更清晰，也讓用戶更容易找到某個控件。 e,確保用戶能明白處于默認(rèn)尺寸的首要內(nèi)容的含義例如，用戶無需水平滾動就能看到重要的文本，或不用放大就可以看到主體圖像。 準(zhǔn)備好改變字體大小。用戶期望大多數(shù)應(yīng)用能有設(shè)置字號大小的功能。為了適應(yīng)一些文本大小的變化，你也許需要調(diào)整布局. f,盡量避免UI上不一致的表現(xiàn)在一般情況下，有著相似功能的控件看起來也應(yīng)該類似。用戶常常認(rèn)為他們看到的不同總有原因，而且他們傾向于花時間去嘗試（譯者按：因此為了避免用戶做無用的嘗試所以建議類似功能外觀一樣）。 g,給每個互動的元素充足的空間，從而讓用戶容易操作這些內(nèi)

41、容和控件常用的點(diǎn)按類控件的大小是44 x 44點(diǎn)（points）。2.3起始與停止（ Starting and Stopping）2.3.1即時啟動（Start Instantly） 有種說法是用戶往往不會花超過一兩分鐘去審視一個新應(yīng)用，當(dāng)你將應(yīng)用從打開到啟動這段時間壓縮得很短，并且同時在載入過程中呈現(xiàn)一些對用戶有幫助的內(nèi)容，你就會激發(fā)用戶的興趣并給所有用戶一個驚喜。a,盡可能避免使用閃屏或者其他啟動體驗(yàn)b,避免讓用戶做過多設(shè)置c,謹(jǐn)慎使用新手引導(dǎo)d,不要太早要求用戶去給你的應(yīng)用評分e,一般建議按照屏幕默認(rèn)的定向方式啟動你的應(yīng)用f,如果可能，不要讓用戶在初次啟動應(yīng)用時閱讀免責(zé)聲明或者確認(rèn)用戶協(xié)

42、議g,在應(yīng)用重啟后，需要恢復(fù)到用戶退出使用時的狀態(tài)，讓他們可以從中斷之處繼續(xù)使用2.3.2 時刻準(zhǔn)備好停止（Always Be Prepared to Stop） iOS 應(yīng)用無需關(guān)閉或退出選項。當(dāng)用戶切換應(yīng)用，回到主屏幕或者將設(shè)備調(diào)至睡眠模式的時候，其實(shí)就是停止了當(dāng)前應(yīng)用的使用。 當(dāng)用戶切換應(yīng)用時，iOS的多任務(wù)系統(tǒng)會將其放置到后臺并將新應(yīng)用的UI替換上來。在這種情況下，你必須做到以下幾點(diǎn)： 隨時并盡快保存用戶信息，因?yàn)樵诤笈_的應(yīng)用隨時有可能被終止或退出。 當(dāng)應(yīng)用停止的時候保存當(dāng)前狀態(tài)，使用戶可以在回到應(yīng)用時能從中斷之處繼續(xù)使用。例如，在使用可滾動的數(shù)據(jù)列表時，退出后保存列表所在的位置。a,

43、不要強(qiáng)制讓應(yīng)用退出。因?yàn)檫@樣會讓用戶誤以為是crash。如果有問題產(chǎn)生，需要告訴用戶具體狀況以及如何解決。以下有兩個建議，取決于出現(xiàn)的問題有多嚴(yán)重而酌情使用： 如果應(yīng)用中所有的功能當(dāng)前都不可用，那么應(yīng)該顯示一些內(nèi)容來解釋當(dāng)前的情形，并建議用戶如何進(jìn)行后續(xù)操作。這部分內(nèi)容給予了用戶以反饋，使用戶相信你的應(yīng)用現(xiàn)在沒問題。同時這也可以穩(wěn)定用戶情緒，讓他們決定是否要采取糾正措施，繼續(xù)使用應(yīng)用，還是切換到另一個應(yīng)用。b,如果只有部分功能不可用，那么只要當(dāng)用戶使用這些功能時顯示提示即可。不然的話，用戶就應(yīng)該能正常使用應(yīng)用的其他功能。如果你決定使用警告框來進(jìn)行提示，請確保只在用戶嘗試使用不可用的功能時再顯示

44、。2.4模態(tài)情境（ Modal Contexts） 模態(tài)是一個承載某些連貫操作或內(nèi)容的優(yōu)缺點(diǎn)并存的模式。它可以給用戶提供一種不脫離主任務(wù)的方式去完成一個任務(wù)或者獲得信息，但是也會臨時性地阻止用戶對應(yīng)用的其他部分進(jìn)行交互操作。理想情況下，用戶可以與iOS 應(yīng)用進(jìn)行一種非線性的交互，所以，盡可能減少應(yīng)用中的模態(tài)體驗(yàn)是最好的。通常情況，在以下情形下可以考慮使用模態(tài)情境：必須引起用戶關(guān)注的時候。一個獨(dú)立的任務(wù)需要完成或者很明確需要被放棄，為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時候。a, 保持模態(tài)任務(wù)的簡單，簡短和高度聚焦b,始終提供明顯、安全的途徑退出模態(tài)任務(wù)c,一個任務(wù)需要多層級的模態(tài)視圖時，確保

45、用戶理解點(diǎn)擊完成按鈕的結(jié)果d,保證提醒對話框的內(nèi)容都是重要且可操作的e,尊重用戶關(guān)于接收通知的選擇2.5交互性和反饋(Interactivity and Feedback）2.5.1用戶知道標(biāo)準(zhǔn)手勢（Users Know the Standard Gestures）用戶使用點(diǎn)擊、拖拽、捏合等手勢與iOS設(shè)備進(jìn)行交互。使用手勢拉近了用戶和設(shè)備之間的距離，并且增強(qiáng)了直接操縱感。用戶通常期待手勢在不同應(yīng)用之間都是通用的。除了用戶熟悉的標(biāo)準(zhǔn)手勢，iOS還定義了一些系統(tǒng)范圍內(nèi)的操作，例如呼出控制中心或消息中心。在任意應(yīng)用下都可以使用這些操作。a,不要給標(biāo)準(zhǔn)手勢賦予不同的行為。除非你的應(yīng)用是游戲，否則重新

46、定義標(biāo)準(zhǔn)手勢會使用戶迷惑，且增加使用難度。 b,不要創(chuàng)建和標(biāo)準(zhǔn)手勢功能相似的手勢操作。用戶已經(jīng)習(xí)慣了標(biāo)準(zhǔn)手勢的行為，沒有必要讓用戶學(xué)習(xí)達(dá)到同樣效果的不同操作。c,可以用復(fù)雜手勢作為完成某任務(wù)的快捷方式，但不能是唯一觸達(dá)方式。最好給用戶提供一些簡單、直接的方式完成某操作，即使這種方法需要額外的動作。簡單的手勢能讓用戶集中于當(dāng)前的體驗(yàn)和內(nèi)容，而不是交互操作本身。 d,除非是游戲，否則避免定義新的手勢。在游戲或其他沉浸式的應(yīng)用中，操作手勢也是有趣體驗(yàn)的一部分。但是在普通應(yīng)用中，幫助用戶達(dá)成目標(biāo)要比操作本身重要的多，所以最好使用標(biāo)準(zhǔn)手勢，盡量避免讓用戶去發(fā)掘和記憶新的操作。e,在特定的環(huán)境中，可以考慮

47、使用多指操作。雖然復(fù)雜的操作并不一定適用于所有應(yīng)用，但對用戶會花大量時間使用的應(yīng)用來說可以豐富體驗(yàn)，例如游戲或創(chuàng)建內(nèi)容環(huán)境。但因?yàn)榉菢?biāo)準(zhǔn)手勢可發(fā)現(xiàn)性差，要盡量少用，并且不要讓這類手勢成為完成任務(wù)的唯一方式。2.5.2 可交互元素吸引用戶點(diǎn)擊（Interactive Elements Invite Touch） 為了暗示交互性，設(shè)計時會使用很多線索，包括顏色、位置、上下文、表意明確的圖標(biāo)和標(biāo)簽等。并不需要過于修飾元素來向用戶展示可交互性。 一個關(guān)鍵的顏色可以給用戶提供很強(qiáng)的視覺指引，尤其是沒有冗余的其它顏色時。為了有對比，使用藍(lán)色標(biāo)記可交互的元素，并且使用統(tǒng)一的、易識別的視覺風(fēng)格。返回按鈕使用多

48、個線索指明其可交互性并傳達(dá)其功能：它出現(xiàn)在導(dǎo)航中，顯示了一個指向后方的圖標(biāo)，使用了關(guān)鍵色，顯示了上一級頁面的標(biāo)題。一個圖標(biāo)或者標(biāo)題提供了清晰的名稱指引用戶點(diǎn)擊它。例如，地圖中的標(biāo)題“立交橋路線”，“定位到這里”，清晰地說明了用戶可做的操作。結(jié)合關(guān)鍵色，就可以省去按鈕邊界或其他多余的修飾。在內(nèi)容區(qū)域，有必要給按鈕添加邊界或背景。操作條中的按鈕、動作表單和提醒對話框可以不需要邊界，因?yàn)橛脩糁涝谶@種區(qū)域中大多數(shù)選項是可交互的。但是在內(nèi)容區(qū)域，按鈕有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來。例如，系統(tǒng)自帶的音樂、時鐘、照片和App Store應(yīng)用會在一些特別的場景中使用這種按鈕。 時鐘應(yīng)用在秒表

49、和計時頁面中給按鈕增加背景來強(qiáng)調(diào)開始和暫停按鈕，并且使按鈕在周圍的內(nèi)容中更容易點(diǎn)擊。App Store應(yīng)用中使用有邊界的按鈕，將按鈕和整個內(nèi)容條區(qū)分開來，點(diǎn)擊整條內(nèi)容查看詳細(xì)信息，點(diǎn)擊按鈕進(jìn)行下載安裝。照片應(yīng)用中給分享按鈕增加了邊框，與其他解釋性文本進(jìn)行了區(qū)分。2.5.3 反饋有助于理解（Feedback Aids Understanding）反饋會幫助用戶了解應(yīng)用當(dāng)前在做什么，發(fā)現(xiàn)接下來可以做什么以及理解動作產(chǎn)生的結(jié)果。UIKit提供了很多反饋。 a,盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進(jìn)行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的。例如，郵箱應(yīng)用將當(dāng)前郵箱的狀態(tài)顯示工具條上，這樣就不會影響當(dāng)前內(nèi)容。 b,避免顯示不必要的警告框。警告框是一種很強(qiáng)的反饋機(jī)制，只有在傳遞非常重要也是理論上可行的信息時才需要使用它。如果用戶?？吹胶芏嗖皇侵匾畔⒌木婵颍麄兒芸炀蜁雎运袑υ捒蛱嵝?。2.5.4 輸入信息的方式要簡單（Inputting Information Should Be Easy）不管用戶是點(diǎn)擊控件還是使用鍵盤，輸入信息都會花費(fèi)時間和精力。如果發(fā)揮有用的效用前就讓用戶輸入大量信息會減弱用戶繼續(xù)使用的欲望。a,讓用戶更容易地進(jìn)行選擇。例如，使用選擇器或者表格代替純文本，避免要求用戶