UIUI交互設(shè)計(jì)案例教程UIInteractionDesignCaseTutorialPLAY全套可編輯PPT課件01UI交互設(shè)計(jì)基礎(chǔ)02UI交互設(shè)計(jì)規(guī)范和原則03使用AxureRP實(shí)現(xiàn)線(xiàn)框原型設(shè)計(jì)04用AfterEffects設(shè)計(jì)和實(shí)現(xiàn)UI交互動(dòng)效05常見(jiàn)UI交互動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)（上）06常見(jiàn)UI交互動(dòng)效設(shè)計(jì)與實(shí)現(xiàn)（下）UI目錄01UI交互設(shè)計(jì)基礎(chǔ)

隨著互聯(lián)網(wǎng)的發(fā)展，“UI交互設(shè)計(jì)”已在國(guó)內(nèi)悄然走熱。本章首先介紹UI設(shè)計(jì)與UI交互設(shè)計(jì)的基礎(chǔ)知識(shí)，然后介紹UI交互設(shè)計(jì)的基本流程，最后介紹移動(dòng)端App與網(wǎng)站交互設(shè)計(jì)的差異，便于學(xué)習(xí)者快速了解UI交互設(shè)計(jì)，為今后的設(shè)計(jì)之路打下堅(jiān)實(shí)的基礎(chǔ)。單元導(dǎo)讀★了解UI設(shè)計(jì)、交互設(shè)計(jì)、UI交互設(shè)計(jì)的區(qū)別★了解UI交互設(shè)計(jì)的基本概念和常用工具★熟悉UI交互設(shè)計(jì)的工作要求與基本流程★了解移動(dòng)端App和網(wǎng)站交互設(shè)計(jì)的區(qū)別知識(shí)目標(biāo)★學(xué)會(huì)思考、規(guī)劃未來(lái)的職業(yè)發(fā)展方向，樹(shù)立正確的人生目標(biāo)★培養(yǎng)自身細(xì)心、耐心、精益求精的學(xué)習(xí)和工作態(tài)度

思政目標(biāo)★掌握交互設(shè)計(jì)說(shuō)明文檔的書(shū)寫(xiě)

技能目標(biāo)學(xué)習(xí)目標(biāo)1.1UI設(shè)計(jì)概述1.1.1初識(shí)UI設(shè)計(jì)UI

是userinterface（用戶(hù)界面）的簡(jiǎn)稱(chēng)，UI設(shè)計(jì)又稱(chēng)為“用戶(hù)界面設(shè)計(jì)”。從字面上看，它包括用戶(hù)和界面兩部分，但實(shí)際上還包括用戶(hù)與界面之間的交互關(guān)系，

因此UI設(shè)計(jì)是指用戶(hù)研究、交互設(shè)計(jì)、界面設(shè)計(jì)三方面的整體設(shè)計(jì)。移動(dòng)端AppUI設(shè)計(jì)

網(wǎng)站UI設(shè)計(jì)網(wǎng)站UI設(shè)計(jì)軟件UI設(shè)計(jì)移動(dòng)端AppUI設(shè)計(jì)游戲UI設(shè)計(jì)UI1.1UI設(shè)計(jì)概述1.1.2UI設(shè)計(jì)相關(guān)崗位的工作職責(zé)

UI設(shè)計(jì)細(xì)分為用戶(hù)研究、產(chǎn)品經(jīng)理、UI交互設(shè)計(jì)師、UI視覺(jué)設(shè)計(jì)師、前端等崗位，他們之間的關(guān)系緊密，各司其職。1.1UI設(shè)計(jì)概述1.1.2UI設(shè)計(jì)相關(guān)崗位的工作職責(zé)1．用戶(hù)研究（UR）（1）研究分析目標(biāo)用戶(hù)的需求、認(rèn)知心理、操作行為等特性，（2）明確產(chǎn)品的概念和細(xì)節(jié)，使產(chǎn)品設(shè)計(jì)更符合用戶(hù)的習(xí)慣和期待。2．產(chǎn)品經(jīng)理（PM）（1）確定產(chǎn)品定位；（2）確定產(chǎn)品的規(guī)劃與設(shè)計(jì)；（3）推進(jìn)、跟蹤產(chǎn)品的開(kāi)發(fā)和上線(xiàn)；（4）對(duì)產(chǎn)品進(jìn)行升級(jí)和迭代，負(fù)責(zé)產(chǎn)品生命周期。3．UI交互設(shè)計(jì)師（1）畫(huà)流程圖、線(xiàn)框圖和做動(dòng)效（2）對(duì)界面的交互行為進(jìn)行設(shè)計(jì)（3）協(xié)助產(chǎn)品經(jīng)理進(jìn)行產(chǎn)品調(diào)研與分析，（4）輸出原型圖；（5）制定統(tǒng)一的設(shè)計(jì)規(guī)范及標(biāo)準(zhǔn)；（6）輸出交互設(shè)計(jì)說(shuō)明文檔4．UI視覺(jué)設(shè)計(jì)師（1）設(shè)計(jì)軟件產(chǎn)品的外形（2）有良好的溝通能力與創(chuàng)新能力1.2

UI交互設(shè)計(jì)入門(mén)1.2.1交互設(shè)計(jì)中的“交互”

交互：意為交流與互動(dòng)，存在于我們的日?；顒?dòng)之中。交互可以是人與人之間的交互，也可以是人與物之間的交互。

交互設(shè)計(jì)：是對(duì)兩個(gè)或多個(gè)個(gè)體之間的交互行為進(jìn)行設(shè)計(jì)，屬于定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。

交互設(shè)計(jì)目的：注重創(chuàng)建人與產(chǎn)品及服務(wù)之間的有意義的關(guān)系，是通過(guò)對(duì)產(chǎn)品的界面和行為進(jìn)行設(shè)計(jì)，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系。

可用性：是交互設(shè)計(jì)的重要指標(biāo)。交互設(shè)計(jì)不在于設(shè)計(jì)的交互方式有多么復(fù)雜與獨(dú)特，而在于設(shè)計(jì)出的產(chǎn)品是可用的、好用的。1.2

UI交互設(shè)計(jì)入門(mén)1.2.1交互設(shè)計(jì)中的“交互”

網(wǎng)易云音樂(lè)助眠解壓頻道明星哄睡欄目，它根據(jù)用戶(hù)選擇的明星聲音，將明星美照的全屏效果作為背景圖，減少其他信息對(duì)用戶(hù)的干擾，從用戶(hù)體驗(yàn)角度出發(fā)，使用戶(hù)更快地沉浸到當(dāng)前的氛圍情境下。網(wǎng)易云音樂(lè)助眠解壓頻道明星哄睡欄目1.2

UI交互設(shè)計(jì)入門(mén)1.2.1交互設(shè)計(jì)中的“交互”

高德地圖App界面，當(dāng)目的地是一個(gè)出入口比較復(fù)雜的地方時(shí)，會(huì)顯示多個(gè)?？康攸c(diǎn)，有的地方不能停車(chē)，只能下人；有的地方是接人的，可以?？浚脩?hù)可根據(jù)需要進(jìn)行選擇，非常方便。高德地圖App界面1.2

UI交互設(shè)計(jì)入門(mén)1.2.2什么是UI交互設(shè)計(jì)

UI交互設(shè)計(jì)，是UI視覺(jué)設(shè)計(jì)與交互設(shè)計(jì)的結(jié)合，是將交互設(shè)計(jì)的理念運(yùn)用在UI界面上所形成的新的設(shè)計(jì)方向。學(xué)習(xí)UI交互設(shè)計(jì)的同時(shí)還需要了解UI視覺(jué)設(shè)計(jì)與交互設(shè)計(jì)的知識(shí)，雖然三者之間存在不可分割的緊密聯(lián)系，但它們又都有各自不同的特點(diǎn)。關(guān)系圖課堂提示

早在2014年，手機(jī)上網(wǎng)的使用率就已超過(guò)了計(jì)算機(jī)，且每年都在持續(xù)上漲，隨著智能機(jī)的發(fā)展，現(xiàn)在除專(zhuān)業(yè)需要電腦外，大部分人都只使用手機(jī)解決問(wèn)題。由于用戶(hù)使用手機(jī)和電腦的目的不同，導(dǎo)致移動(dòng)端UI交互設(shè)計(jì)比網(wǎng)站交互設(shè)計(jì)更輕巧、更通俗易用，也使得移動(dòng)端UI交互設(shè)計(jì)成了交互設(shè)計(jì)的入門(mén)級(jí)必學(xué)方向。因此，本課將以移動(dòng)端UI交互設(shè)計(jì)為主，網(wǎng)站UI交互設(shè)計(jì)為輔進(jìn)行講解。1.2

UI交互設(shè)計(jì)入門(mén)1.2.3UI交互設(shè)計(jì)需要考慮的問(wèn)題

1．是否遵循用戶(hù)習(xí)慣用戶(hù)在長(zhǎng)期操作、瀏覽產(chǎn)品界面的過(guò)程中，會(huì)形成一種特定的習(xí)慣。遵循用戶(hù)習(xí)慣會(huì)降低成本，提高用戶(hù)對(duì)產(chǎn)品的信任度，但會(huì)失去趣味性；提升產(chǎn)品差異化，會(huì)給用戶(hù)獨(dú)特、深刻的體驗(yàn)，但會(huì)有因改動(dòng)與用戶(hù)習(xí)慣相差太大而失去用戶(hù)的風(fēng)險(xiǎn)。因此，在實(shí)際設(shè)計(jì)工作中，最好在遵循用戶(hù)習(xí)慣的基礎(chǔ)上，在細(xì)節(jié)上進(jìn)行創(chuàng)新。例如，用戶(hù)在瀏覽界面時(shí)一般是從左到右、從上至下；如果界面邊上有滾動(dòng)條，用戶(hù)就會(huì)自然而然地上下滑動(dòng)界面等。1.2

UI交互設(shè)計(jì)入門(mén)1.2.3UI交互設(shè)計(jì)需要考慮的問(wèn)題

2．注意用戶(hù)群體的文化背景

在交互設(shè)計(jì)時(shí)，不能只考慮產(chǎn)品和公司要表達(dá)的內(nèi)容及所處背景，還要綜合考慮主體用戶(hù)所處的地域、文化背景。

例如，紅色在有的國(guó)家象征熱情，而在有的國(guó)家則象征死亡例如，紅色在有的國(guó)家象征熱情，而在有的國(guó)家則象征死亡。所以在設(shè)計(jì)產(chǎn)品時(shí)，對(duì)用戶(hù)進(jìn)行調(diào)研是很有必要的。1.2

UI交互設(shè)計(jì)入門(mén)1.2.3UI交互設(shè)計(jì)需要考慮的問(wèn)題

在交互設(shè)計(jì)發(fā)展趨于平緩，用戶(hù)習(xí)慣、界面樣式基本成形的今天，創(chuàng)新能力顯得尤為重要。怎樣在不破壞用戶(hù)習(xí)慣和界面美觀(guān)的情況下找到可以創(chuàng)新的點(diǎn)，并將交互設(shè)計(jì)案例教程這個(gè)點(diǎn)進(jìn)行改進(jìn)與完善以達(dá)到提高用戶(hù)留存率的目的，是資深的UI交互設(shè)計(jì)師必須思考的問(wèn)題。3．創(chuàng)新能力1.2

UI交互設(shè)計(jì)入門(mén)1.2.3UI交互設(shè)計(jì)需要考慮的問(wèn)題

4．交互細(xì)節(jié)與方式

在進(jìn)行交互設(shè)計(jì)時(shí)，確定一個(gè)方案必然是因?yàn)榻?jīng)過(guò)了深思熟慮，嘗試了各種效果，并經(jīng)過(guò)了深入了解和調(diào)研，只有這樣才能保證你的設(shè)計(jì)是經(jīng)得起推敲的，真正為公司和用戶(hù)考慮的。不同的表現(xiàn)形式，如菜單欄采用抽屜式還是側(cè)滑式，哪種更能表達(dá)問(wèn)題并且不影響用戶(hù)觀(guān)看；某個(gè)功能是添加還是去掉；還有交互時(shí)采用何種效果，是完成交互就好，還是需要特殊的光效等，這些都是UI交互設(shè)計(jì)師在設(shè)計(jì)工作中需要考慮的細(xì)節(jié)。

1.2

UI交互設(shè)計(jì)入門(mén)1.2.3UI交互設(shè)計(jì)需要考慮的問(wèn)題

4．交互細(xì)節(jié)與方式移動(dòng)端微信和飛書(shū)聊天界面

例如：移動(dòng)端微信和飛書(shū)聊天界面的布局圖，在飛書(shū)之前，市面上常見(jiàn)的聊天軟件都采用左右分布的形式，這樣的形式會(huì)造成閱讀時(shí)起點(diǎn)不斷轉(zhuǎn)換，影響效率。飛書(shū)大膽創(chuàng)新，采用了左對(duì)齊的布局方式，通過(guò)不同顏色的對(duì)話(huà)框底色輔助區(qū)分對(duì)話(huà)雙方的身份，大大提高了閱讀效率，并且在屏幕較大的PC端上這個(gè)改變更加明顯。這樣的布局雖然打破了用戶(hù)習(xí)慣，卻意外收獲了不錯(cuò)的評(píng)價(jià)。1.2

UI交互設(shè)計(jì)入門(mén)1.2.4UI交互設(shè)計(jì)師常用工具1．腦圖工具腦圖工具可以用來(lái)梳理思路，記錄頭腦風(fēng)暴，繪制思維導(dǎo)圖、流程圖和信息架構(gòu)圖，常見(jiàn)的腦圖工具有Xmind、MindNode、MindMaster等。用工具來(lái)繪制思維導(dǎo)圖不僅方便快捷、規(guī)整美觀(guān)，還方便團(tuán)隊(duì)觀(guān)看與分享。1.2

UI交互設(shè)計(jì)入門(mén)1.2.4UI交互設(shè)計(jì)師常用工具2．產(chǎn)品原型圖工具

為了更直觀(guān)、準(zhǔn)確地傳達(dá)項(xiàng)目設(shè)計(jì)的方向和流程，設(shè)計(jì)師需要繪制產(chǎn)品原型圖，常用工具有AxureRP、Sketch、AdobeXD、AdobeIllustrator、Photoshop等。

AxureRP是Sketch出現(xiàn)之前最流行、應(yīng)用最廣泛的原型設(shè)計(jì)軟件，它還具有制作可交互原型圖的功能，可以快速驗(yàn)證交互動(dòng)效的效果，是一款較為成熟的軟件。

Sketch是一款新興軟件，適合沒(méi)有美術(shù)功底和Photoshop基礎(chǔ)的UI交互設(shè)計(jì)師使用。操作簡(jiǎn)單、強(qiáng)大的數(shù)據(jù)庫(kù)、Symbol復(fù)用等可與AxureRP媲美的原因，但它只能在Mac上運(yùn)行。軟件圖標(biāo)1.2

UI交互設(shè)計(jì)入門(mén)1.2.4UI交互設(shè)計(jì)師常用工具3．交互動(dòng)效原型工具

常用的交互動(dòng)效制作軟件有AfterEffects、Principle、Framer、Keynote等。

AfterEffects是一款影視后期制作軟件，在制作交互動(dòng)效和動(dòng)畫(huà)方面比較專(zhuān)業(yè)，本課將會(huì)著重講解使用它制作交互動(dòng)效的方法。

Principle可以直接導(dǎo)入Sketch文件進(jìn)行交互動(dòng)效原型設(shè)計(jì)，主要特點(diǎn)是易用和高效，非常適合初學(xué)者學(xué)習(xí)。此軟件為Mac系統(tǒng)專(zhuān)用。

Framer功能強(qiáng)大，需要會(huì)寫(xiě)代碼，所以不太適合剛?cè)胄械腢I交互設(shè)計(jì)師使用。

在設(shè)計(jì)中，使用工具只起到了輔助作用，真正重要的還是設(shè)計(jì)師的想法。只有多看、多發(fā)現(xiàn)、多思考才能設(shè)計(jì)出富有創(chuàng)意的作品。軟件圖標(biāo)1.2

UI交互設(shè)計(jì)入門(mén)1.2.5UI交互設(shè)計(jì)師常用網(wǎng)站1．國(guó)內(nèi)常用網(wǎng)站

優(yōu)秀設(shè)計(jì)作品網(wǎng)站有花瓣（/）和站酷（/）?；ò昃W(wǎng)和站酷網(wǎng)首頁(yè)界面1.2

UI交互設(shè)計(jì)入門(mén)1.2.5UI交互設(shè)計(jì)師常用網(wǎng)站UI中國(guó)（/）。

該網(wǎng)站專(zhuān)門(mén)發(fā)布與UI設(shè)計(jì)相關(guān)的作品，視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)都有涉及網(wǎng)站功能豐富，通過(guò)它可以進(jìn)行技術(shù)交流，參加設(shè)計(jì)競(jìng)賽和有獎(jiǎng)?wù)骷O(shè)計(jì)作品活動(dòng)，學(xué)習(xí)UI設(shè)計(jì)教程等。1．國(guó)內(nèi)常用網(wǎng)站1.2

UI交互設(shè)計(jì)入門(mén)1.2.5UI交互設(shè)計(jì)師常用網(wǎng)站Awwwards網(wǎng)站

該網(wǎng)站每天都會(huì)票選出一個(gè)最佳設(shè)計(jì)，推薦的作品無(wú)論是從交互、視覺(jué)、創(chuàng)意哪方面來(lái)說(shuō)都是行業(yè)頂尖的，通過(guò)該網(wǎng)站可以學(xué)習(xí)國(guó)內(nèi)外優(yōu)秀設(shè)計(jì)的思路和近期的設(shè)計(jì)趨勢(shì)。

2．國(guó)外常用網(wǎng)站1.2

UI交互設(shè)計(jì)入門(mén)1.2.5UI交互設(shè)計(jì)師常用網(wǎng)站NounProject網(wǎng)站

該網(wǎng)站是一個(gè)免費(fèi)的高質(zhì)量的圖標(biāo)素材網(wǎng)，圖標(biāo)樣式豐富，涉及內(nèi)容廣泛，而且該網(wǎng)站的圖標(biāo)支持PPT、PNG等多種格式，無(wú)須擔(dān)心兼容問(wèn)題。

2．國(guó)外常用網(wǎng)站1.2

UI交互設(shè)計(jì)入門(mén)1.2.6UI交互設(shè)計(jì)常用術(shù)語(yǔ)

交互設(shè)計(jì)是在1984年的一次設(shè)計(jì)會(huì)議上由比爾·摩格理吉提出的，迄今為止已在國(guó)外發(fā)展了三十幾年，而國(guó)內(nèi)的UI設(shè)計(jì)僅發(fā)展了十幾年，甚至于近幾年才對(duì)UI交互設(shè)計(jì)有了真正的重視和了解。

目前，國(guó)外的UI交互設(shè)計(jì)已經(jīng)有了一套較為完整的規(guī)范，為便于學(xué)習(xí)和交流，加深對(duì)該領(lǐng)域的理解與認(rèn)知，下面列舉了一些有關(guān)UI交互設(shè)計(jì)的常用術(shù)語(yǔ)：1.2

UI交互設(shè)計(jì)入門(mén)1.2.7UI交互設(shè)計(jì)自查表

一般在產(chǎn)品設(shè)計(jì)基本完成后，為避免出錯(cuò)，還需要通過(guò)自查來(lái)確認(rèn)有沒(méi)有缺頁(yè)、漏頁(yè)等問(wèn)題。為了更直觀(guān)、更方便、更準(zhǔn)確地進(jìn)行檢查，一般都會(huì)列一個(gè)UI交互設(shè)計(jì)自查表該表只是為剛?cè)腴T(mén)的UI交互設(shè)計(jì)師做一個(gè)大致參考，具體項(xiàng)目還需要具體分析。1.2

UI交互設(shè)計(jì)入門(mén)1.2.7UI交互設(shè)計(jì)自查表

UI交互設(shè)計(jì)自查表涵蓋廣泛，從前期分析到后期測(cè)評(píng)等都有涉及，可以較為完整地分析整個(gè)交互設(shè)計(jì)流程。1.3

UI交互設(shè)計(jì)的基本流程

UI交互設(shè)計(jì)師的工作不僅僅是繪制原型圖，還要參與前期的項(xiàng)目討論和后期的測(cè)試驗(yàn)收等一系列環(huán)節(jié)。UI交互設(shè)計(jì)的基本流程包括需求分析、用戶(hù)行為流程設(shè)計(jì)、產(chǎn)品信息架構(gòu)設(shè)計(jì)、產(chǎn)品原型設(shè)計(jì)、編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔、產(chǎn)品測(cè)評(píng)?！锾崾?/p>

UI交互設(shè)計(jì)的基本流程，在具體工作中可以根據(jù)項(xiàng)目要求進(jìn)行適當(dāng)調(diào)整，要確保每一步都是以用戶(hù)和項(xiàng)目為前提進(jìn)行的，不可主觀(guān)臆斷、生搬硬套。1.3UI交互設(shè)計(jì)的基本流程1.3.1需求分析1．用戶(hù)需求1）構(gòu)建用戶(hù)角色

（1）確定目標(biāo)用戶(hù)

（2）構(gòu)建用戶(hù)角色2）熟悉用戶(hù)使用場(chǎng)景：模擬構(gòu)建一個(gè)代表性場(chǎng)景3）確定用戶(hù)需求

（1）辨別用戶(hù)需求的可信度

（2）客觀(guān)對(duì)待用戶(hù)需求1.3UI交互設(shè)計(jì)的基本流程1.3.1需求分析2．從用戶(hù)需求到產(chǎn)品需求

產(chǎn)品需求來(lái)源于用戶(hù)需求，但用戶(hù)需求并不等于產(chǎn)品需求。產(chǎn)品需求是在提煉用戶(hù)真實(shí)需要與動(dòng)機(jī)，并理解業(yè)務(wù)、技術(shù)和市場(chǎng)的需求與限制的基礎(chǔ)上，對(duì)產(chǎn)品進(jìn)行分析，為用戶(hù)需求提供產(chǎn)品設(shè)計(jì)方案，從而進(jìn)行產(chǎn)品規(guī)劃。

在確定產(chǎn)品需求時(shí)，需要考慮以下五個(gè)核心問(wèn)題。（1）滿(mǎn)足誰(shuí)的需要？（2）他們有什么需要？（3）我們提供的是否能滿(mǎn)足需要？（4）目標(biāo)需要與產(chǎn)品的獨(dú)特性如何結(jié)合？（5）如何有效地實(shí)現(xiàn)這些需要？例如，當(dāng)用戶(hù)訴求為需要擁有一匹快馬時(shí)，福特沒(méi)有去馬場(chǎng)選馬配種，而是轉(zhuǎn)而制造了汽車(chē)以滿(mǎn)足用戶(hù)需求，發(fā)展至今，汽車(chē)已成為當(dāng)今人們的主要出行方式，為人們生活帶來(lái)了很大便利。由此可以看出，產(chǎn)品需求就是根據(jù)用戶(hù)需求來(lái)描述應(yīng)該設(shè)計(jì)什么樣的產(chǎn)品。1.3UI交互設(shè)計(jì)的基本流程1.3.1需求分析3．明確設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)就是從用戶(hù)和產(chǎn)品的角度出發(fā)，對(duì)用戶(hù)需求與產(chǎn)品需求進(jìn)行整合歸納，得出對(duì)產(chǎn)品的期望效果。設(shè)計(jì)目標(biāo)指引著整個(gè)設(shè)計(jì)過(guò)程，為設(shè)計(jì)師指明方向。

通常在確立設(shè)計(jì)目標(biāo)時(shí)，需要考慮以下兩個(gè)問(wèn)題。

（1）動(dòng)機(jī)：可以滿(mǎn)足用戶(hù)或企業(yè)的什么需求，如提高盈利，擴(kuò)大影響力等。

（2）障礙：用戶(hù)在使用產(chǎn)品過(guò)程中可能會(huì)遇到的障礙。1.3UI交互設(shè)計(jì)的基本流程1.3.2用戶(hù)行為流程設(shè)計(jì)

1．用戶(hù)行為分析

用戶(hù)行為是指用戶(hù)與特定產(chǎn)品交互的方式。而用戶(hù)行為分析就是通過(guò)對(duì)用戶(hù)使用產(chǎn)品過(guò)程中的數(shù)據(jù)進(jìn)行收集、整理、統(tǒng)計(jì)和分析，獲取用戶(hù)使用產(chǎn)品的規(guī)律，為流程設(shè)計(jì)和后期產(chǎn)品的發(fā)展、優(yōu)化提供數(shù)據(jù)支撐。

用戶(hù)行為分析的數(shù)據(jù)依據(jù)主要有：用戶(hù)的下載量、使用頻率、訪(fǎng)問(wèn)量；用戶(hù)使用產(chǎn)品時(shí)的交互操作和停頓（其中有點(diǎn)擊、手指滑動(dòng)、鼠標(biāo)滾動(dòng)、在當(dāng)前頁(yè)面停留的時(shí)間等）；同類(lèi)行為邏輯的產(chǎn)品使用情況。通過(guò)這些數(shù)據(jù)，可以分析出用戶(hù)的基本信息、訪(fǎng)問(wèn)習(xí)慣、喜歡的產(chǎn)品和功能等。2．用戶(hù)行為流程設(shè)計(jì)

流程是一系列連續(xù)有規(guī)律的活動(dòng)的組合，流程設(shè)計(jì)則是對(duì)活動(dòng)的具體順序和步驟的安排，是對(duì)各交互點(diǎn)的梳理，是決定產(chǎn)品可用、易用的重要因素。

流程設(shè)計(jì)是依附于產(chǎn)品解決任務(wù)的過(guò)程而存在的，它可以加強(qiáng)設(shè)計(jì)師對(duì)產(chǎn)品實(shí)現(xiàn)過(guò)程和用戶(hù)行為的理解，有利于開(kāi)發(fā)人員把握產(chǎn)品的整體流程。1.3UI交互設(shè)計(jì)的基本流程1.3.2用戶(hù)行為流程設(shè)計(jì)<知識(shí)鏈接>

流程圖的主要作用是:幫助設(shè)計(jì)師理清思路，梳理活動(dòng)的前后順序；方便查缺補(bǔ)漏，將實(shí)際操作步驟與自己的思路進(jìn)行對(duì)比；有利于與同事之間的溝通，避免文字描述和口頭表達(dá)不清楚的情況發(fā)生。

為了更好地與項(xiàng)目組成員溝通，在繪制流程圖時(shí)，需要遵守一定的規(guī)范。為便于理解，下面以App登錄界面的操作流程圖為例進(jìn)行說(shuō)明。企業(yè)形象廣告更注重將企業(yè)的美好形象單方面地傳遞給公眾。流程圖及其繪制規(guī)范1.3UI交互設(shè)計(jì)的基本流程1.3.3產(chǎn)品信息架構(gòu)設(shè)計(jì)1．概念:信息架構(gòu)英文全稱(chēng)“informationarchitecture”，簡(jiǎn)稱(chēng)“IA”，是將信息從抽象轉(zhuǎn)化為具體的產(chǎn)品形態(tài)。在交互設(shè)計(jì)中，產(chǎn)品信息架構(gòu)設(shè)計(jì)專(zhuān)注于產(chǎn)品的內(nèi)容設(shè)計(jì)和導(dǎo)航問(wèn)題，即通過(guò)對(duì)信息進(jìn)行統(tǒng)籌、規(guī)劃、設(shè)計(jì)、安排等一系列處理，將產(chǎn)品信息內(nèi)容有組織、有條理地呈現(xiàn)給用戶(hù)，從而提高交互效率。

例如，在逛商場(chǎng)時(shí)，一般會(huì)有指示牌寫(xiě)著一樓是珠寶區(qū)、二樓是化妝品區(qū)、三樓是女裝區(qū)、四樓是兒童裝等，這樣顧客就可以很清晰地知道每一層的商品類(lèi)型，跟著指示牌很容易就能找到要買(mǎi)的商品。此處設(shè)計(jì)師的作用就是將樓層信息進(jìn)行梳理和分類(lèi)，并以具體形式呈現(xiàn)出來(lái)以指引用戶(hù)行動(dòng)。在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，UI交互設(shè)計(jì)師的產(chǎn)品信息架構(gòu)設(shè)計(jì)和商場(chǎng)的樓層指示有相通之處。1.3UI交互設(shè)計(jì)的基本流程1.3.3產(chǎn)品信息架構(gòu)設(shè)計(jì)2．如何進(jìn)行產(chǎn)品信息架構(gòu)設(shè)計(jì)

設(shè)計(jì)師可以通過(guò)對(duì)產(chǎn)品的搜索系統(tǒng)、導(dǎo)航系統(tǒng)等進(jìn)行組織分類(lèi)來(lái)合理地呈現(xiàn)產(chǎn)品信息，使用戶(hù)通過(guò)瀏覽、搜索、提問(wèn)等方式快速找到自己所需要的信息。

在組織分類(lèi)時(shí)，需要考慮以下四個(gè)方面的因素。

1）相似性

2）使用頻率3）功能與功能之間的關(guān)系4）擴(kuò)展性1.3UI交互設(shè)計(jì)的基本流程1.3.3產(chǎn)品信息架構(gòu)設(shè)計(jì)

1）相似性將相似的功能進(jìn)行分類(lèi)并組織整合在一起，以大的類(lèi)別為主要框架，大類(lèi)別中小的類(lèi)別或功能作為子框架，構(gòu)成產(chǎn)品的整體框架。

民生銀行App界面例如，民生銀行App中將資產(chǎn)配置、理財(cái)、基金、保險(xiǎn)等具有掙錢(qián)致富性質(zhì)的功能都放到了“財(cái)富”大類(lèi)別中；將手機(jī)充值、生活繳費(fèi)、娛樂(lè)、買(mǎi)票等方便生活的功能都放到了“生活圈”大類(lèi)別中。按照這種方式進(jìn)行分類(lèi)，不僅界面整齊還方便用戶(hù)查找。1.3UI交互設(shè)計(jì)的基本流程1.3.3產(chǎn)品信息架構(gòu)設(shè)計(jì)

2）使用頻率使用頻率越高，說(shuō)明功能越重要，在進(jìn)行信息架構(gòu)設(shè)計(jì)時(shí)，就越要把這個(gè)功能放到用戶(hù)容易觸及和發(fā)現(xiàn)的地方，下面來(lái)看兩個(gè)例子。

（一）高德地圖App界面：它的主要功能是導(dǎo)航，因此在設(shè)計(jì)界面時(shí)，把地圖作為首頁(yè)界面的背景，并將搜索框放在界面頂部，方便用戶(hù)打開(kāi)界面就可以輸入目的地。

（二）智行火車(chē)票App界面：火車(chē)票、機(jī)票、汽車(chē)票的購(gòu)買(mǎi)肯定是它的重要功能，所以設(shè)計(jì)師將這些功能圖標(biāo)放在了界面上方，并在尺寸上與其他圖標(biāo)做了區(qū)分。高德地圖App界面

智行火車(chē)票App界面1.3UI交互設(shè)計(jì)的基本流程1.3.3產(chǎn)品信息架構(gòu)設(shè)計(jì)

3）功能與功能之間的關(guān)系產(chǎn)品的各個(gè)功能之間一般有并列、包含、互斥等關(guān)系，在進(jìn)行信息架構(gòu)設(shè)計(jì)時(shí)，可以根據(jù)功能之間的關(guān)系進(jìn)行組織分類(lèi)。如果功能之間為并列關(guān)系，則可以設(shè)置橫向信息架構(gòu)，如美團(tuán)App分類(lèi)界面的側(cè)邊導(dǎo)航欄。欄中的項(xiàng)目都是生活中的不同方面，屬于并列關(guān)系。4）擴(kuò)展性對(duì)一款新產(chǎn)品進(jìn)行信息架構(gòu)設(shè)計(jì)時(shí)，對(duì)產(chǎn)品功能的考慮肯定會(huì)有所欠缺，隨著產(chǎn)品的迭代升級(jí)，往往會(huì)出現(xiàn)新的功能和需求，如果在進(jìn)行信息架構(gòu)設(shè)計(jì)時(shí)就考慮到了這一點(diǎn)，那就沒(méi)必要在添加功能時(shí)推翻重來(lái)，可以大大節(jié)省時(shí)間、人力成本。美團(tuán)App界面

例如，QQ和微信經(jīng)歷了這么多次的迭代和升級(jí)，添加了大大小小的功能，但是都沒(méi)有影響到它們信息架構(gòu)的核心。1.3UI交互設(shè)計(jì)的基本流程案例練習(xí)1-1?繪制微信信息架構(gòu)圖步驟1：登錄微信之后的界面一般包括：微信、通訊錄、發(fā)現(xiàn)、我四部分，仔細(xì)看的話(huà)，還會(huì)發(fā)現(xiàn)微信界面右上角的“搜索”和“加號(hào)”圖標(biāo)。步驟2：定下大致方向后，就可以開(kāi)始提取界面的詳細(xì)信息，在提取時(shí)要注意按照從左到右、從上到下的順序進(jìn)行，要細(xì)心，不得缺漏，有些信息還需要進(jìn)行整理和歸納。步驟3：App中還會(huì)有二級(jí)、三級(jí)界面，在繪制架構(gòu)圖時(shí)，要考慮周全，越詳細(xì)越好。微信界面

微信通訊錄界面

微信小程序界面1.3UI交互設(shè)計(jì)的基本流程案例練習(xí)1-1?繪制微信信息架構(gòu)圖微信信息架構(gòu)圖

★提示繪制微信的信息架構(gòu)圖只是為了更加了解信息架構(gòu)的構(gòu)成和所要考慮的內(nèi)容，在繪制時(shí)應(yīng)該重點(diǎn)關(guān)注的是微信開(kāi)發(fā)人員為什么要設(shè)置這些功能，為什么要按照這種方式將這些功能進(jìn)行分類(lèi)。例如，如果沒(méi)有發(fā)現(xiàn)界面，那發(fā)現(xiàn)界面中的功能將堆到微信或通訊錄界面，一是搶了主要功能的風(fēng)頭，分不清主次；二是會(huì)顯得頁(yè)面非?；靵y，沒(méi)有條理。1.3UI交互設(shè)計(jì)的基本流程1.3.4產(chǎn)品原型設(shè)計(jì)

1．低保真原型圖

低保真原型圖，即線(xiàn)框圖，它描繪的是頁(yè)面功能結(jié)構(gòu)，關(guān)注的是內(nèi)容、可用功能和預(yù)期的空間分布與優(yōu)先級(jí)排序，有助于UI交互設(shè)計(jì)師和客戶(hù)進(jìn)行討論，確定產(chǎn)品的層次與走向。

一般線(xiàn)框圖由線(xiàn)條、方框、文本構(gòu)成，顏色為灰色。

線(xiàn)框圖的繪制比較簡(jiǎn)單，通過(guò)它可以盡早發(fā)現(xiàn)問(wèn)題并及時(shí)修改。另外，使用灰色線(xiàn)框繪制圖形，使設(shè)計(jì)師不受絢麗色彩和圖像的限制，讓其更容易關(guān)注到界面布局和交互方式上來(lái)。產(chǎn)品線(xiàn)框圖1.3UI交互設(shè)計(jì)的基本流程1.3.4產(chǎn)品原型設(shè)計(jì)

2．高保真原型圖

高保真原型圖指的是動(dòng)態(tài)可交互的原型圖，我們平時(shí)所說(shuō)的原型圖也多指高保真原型圖。它相比于線(xiàn)框圖更加精細(xì)，不僅注重界面元素的視覺(jué)表達(dá)與細(xì)節(jié)問(wèn)題，還要求盡量模擬真實(shí)的產(chǎn)品界面和功能上的交互，提供完整的產(chǎn)品模型。高保真原型圖常用于產(chǎn)品正式開(kāi)發(fā)前的原型測(cè)試，它的應(yīng)用有利于節(jié)省改錯(cuò)時(shí)間和開(kāi)發(fā)成本，但是其繪制耗時(shí)較長(zhǎng)，難以上手。

可交互原型圖1.3UI交互設(shè)計(jì)的基本流程1.3.5編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔1．什么是交互設(shè)計(jì)說(shuō)明文檔

為了傳達(dá)產(chǎn)品的開(kāi)發(fā)需求，保證部門(mén)之間的有效溝通，保證產(chǎn)品質(zhì)量有具體的標(biāo)準(zhǔn)控制，UI交互設(shè)計(jì)師需要在制作完原型圖之后輸出一份詳細(xì)的交互設(shè)計(jì)說(shuō)明文檔。對(duì)于不同的人，交互設(shè)計(jì)說(shuō)明文檔具有不同的作用。在輸出交互設(shè)計(jì)說(shuō)明文檔時(shí)，要充分考慮不同崗位對(duì)文檔的不同需求。優(yōu)秀的交互設(shè)計(jì)說(shuō)明文檔需要做到以下兩點(diǎn)。

（1）簡(jiǎn)明扼要，邏輯清晰。在對(duì)內(nèi)容進(jìn)行說(shuō)明時(shí)，文字要盡量簡(jiǎn)潔、保持思路清晰，能讓人一眼看出要表達(dá)什么，不要有多余的廢話(huà)。

（2）界面美觀(guān)。UI交互設(shè)計(jì)師不僅要保持產(chǎn)品的美觀(guān)，還要考慮交互設(shè)計(jì)說(shuō)明文檔視覺(jué)上的美觀(guān)，一份賞心悅目的文檔可以提高閱讀效率，也更容易使產(chǎn)品獲得認(rèn)可。1.3UI交互設(shè)計(jì)的基本流程1.3.5編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔2．交互設(shè)計(jì)說(shuō)明文檔的內(nèi)容

1）封面：封面用于記錄產(chǎn)品名稱(chēng)、版本信息、時(shí)間、參與設(shè)計(jì)的人員信息等。

2）項(xiàng)目背景和設(shè)計(jì)思路：主要是向相關(guān)人員展示前期的項(xiàng)目背景和設(shè)計(jì)思路，包括需求分析、流程圖、產(chǎn)品信息架構(gòu)圖三部分。

（1）需求分析：不需要將前期分析全部放上去，畢竟有專(zhuān)門(mén)的需求分析文檔，只需要從前期的調(diào)研分析中挑選重點(diǎn)內(nèi)容進(jìn)行總結(jié)和分類(lèi)即可。

（2）流程圖：一般需要包括任務(wù)流程圖（用戶(hù)的操作流程）和頁(yè)面流程圖（導(dǎo)航）。

（3）產(chǎn)品信息架構(gòu)圖：點(diǎn)明頁(yè)面的排布、跳轉(zhuǎn)及具體內(nèi)容。1.3UI交互設(shè)計(jì)的基本流程1.3.5編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔

3）原型圖說(shuō)明

原型圖說(shuō)明一般是將繪制的原型圖放上去，然后對(duì)原型界面進(jìn)行詳細(xì)說(shuō)明。對(duì)原型圖的說(shuō)明不同企業(yè)有不同的方法，可以將說(shuō)明文字放到界面下方，也可以將說(shuō)明文字放到界面旁邊。1.3UI交互設(shè)計(jì)的基本流程1.3.5編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔

3）原型圖說(shuō)明

除對(duì)界面的說(shuō)明外，還需要添加一些特殊的情況說(shuō)明，具體包括以下五類(lèi)。特殊的情況說(shuō)明適配不同載體、不同版本、不同場(chǎng)景等都會(huì)使產(chǎn)品發(fā)生變化，因此設(shè)計(jì)時(shí)都需要考慮并寫(xiě)進(jìn)交互設(shè)計(jì)說(shuō)明文檔中。內(nèi)容獲取途徑圖片、數(shù)據(jù)、圖標(biāo)等的來(lái)源和裁剪方式。限制各種元素在界面中所占大小的范圍值。狀態(tài)包括正常狀態(tài)、空狀態(tài)、異常狀態(tài)、操作方式和誤操作等。加載狀態(tài)需要注意的是，對(duì)加載頁(yè)面的設(shè)計(jì)要考慮進(jìn)流程設(shè)計(jì)和原型設(shè)計(jì)中。1.3UI交互設(shè)計(jì)的基本流程1.3.5編寫(xiě)交互設(shè)計(jì)說(shuō)明文檔

4）更新記錄

在產(chǎn)品設(shè)計(jì)過(guò)程中，修改和優(yōu)化是必不可少的，寫(xiě)更新記錄可以清晰地記錄產(chǎn)品做過(guò)哪些修改，修改之前的版本或元素也別急著刪除，可以以鏈接或圖片的形式放到對(duì)應(yīng)的更新記錄后面，這樣成員就可以一目了然地了解到更新過(guò)的信息，見(jiàn)下表所列。

1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.1交互和操作方式的不同

移動(dòng)端App是直接使用手指觸控屏幕進(jìn)行交互操作，除點(diǎn)擊外還支持多種手勢(shì)，如滑動(dòng)、調(diào)整等。而Web網(wǎng)站多以鼠標(biāo)作為交互操作媒介，除鼠標(biāo)點(diǎn)擊外，也支持鼠標(biāo)滑動(dòng)、滾輪放大縮小等操作方式。具體有以下四點(diǎn)不同。

（1）相比鼠標(biāo)，手指的觸摸范圍更大，沒(méi)有鼠標(biāo)那么精準(zhǔn)，因此移動(dòng)端界面中的元素尺寸和元素間距要設(shè)計(jì)得比較大，以免手指點(diǎn)擊時(shí)出現(xiàn)誤觸。

（2）移動(dòng)端App以單手操作為主，因此在設(shè)計(jì)時(shí)要注意左右手的習(xí)慣問(wèn)題，還要考慮界面元素的擺放，使之基本處于單手的操作范圍內(nèi)。1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.1交互和操作方式的不同

（3）Web網(wǎng)站支持鼠標(biāo)滑到特定位置即展開(kāi)或收起的交互方式，而移動(dòng)端App則需要通過(guò)點(diǎn)擊特定的圖標(biāo)或按鈕來(lái)達(dá)到展開(kāi)或收起的效果。

（4）移動(dòng)端App相比于Web網(wǎng)站來(lái)說(shuō)，在交互方式上較為靈活、多變，設(shè)計(jì)師有更多的設(shè)計(jì)空間。Web網(wǎng)站由于發(fā)展時(shí)間和交互媒介的限制，交互方式較為固定。例如，在移動(dòng)端中，可以使用三指上滑截屏和傾斜手機(jī)以縮放圖片。1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.2使用環(huán)境的不同

移動(dòng)端App可以做到在任意環(huán)境、用任意姿勢(shì)使用，且使用時(shí)長(zhǎng)不受限制。而Web網(wǎng)站，由于計(jì)算機(jī)一般較大，不好移動(dòng)，大多數(shù)使用者都是在室內(nèi)或固定位置使用。用戶(hù)經(jīng)常會(huì)在不同的環(huán)境中使用手機(jī)App，當(dāng)處于嘈雜環(huán)境時(shí)，用戶(hù)很容易被周邊環(huán)境所影響，存在被打斷瀏覽或誤觸的可能，這樣設(shè)計(jì)收藏、稍后閱讀和如何從錯(cuò)誤操作中恢復(fù)等功能就比較實(shí)用了；而當(dāng)用戶(hù)處于安靜的環(huán)境中時(shí)，就可以設(shè)計(jì)沉浸式閱讀功能。而Web網(wǎng)站的使用環(huán)境一般比較穩(wěn)定，因此環(huán)境對(duì)設(shè)計(jì)的影響較小。

1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.3設(shè)備尺寸的不同

移動(dòng)端App所用設(shè)備尺寸較小，支持豎屏和橫屏的相互調(diào)轉(zhuǎn)，而Web網(wǎng)站所用設(shè)備尺寸相對(duì)較大，瀏覽器窗口可縮放。在具體設(shè)計(jì)時(shí)，需要注意以下三點(diǎn)。（1）簡(jiǎn)化頁(yè)面，突出重要信息。

使用優(yōu)先級(jí)方法排列突出重點(diǎn)內(nèi)容，將次要信息適當(dāng)弱化或隱藏。（2）滿(mǎn)足橫屏、豎屏的轉(zhuǎn)換（3）由于移動(dòng)設(shè)備和Web網(wǎng)站顯示器的分辨率有差異，設(shè)備尺寸也不盡相同，因此在界面設(shè)計(jì)時(shí)需要考慮不同設(shè)備的顯示效果和頁(yè)面內(nèi)容的展示與布局。1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.4網(wǎng)絡(luò)環(huán)境的不同

移動(dòng)端App的使用環(huán)境較為復(fù)雜，用戶(hù)可能會(huì)從網(wǎng)絡(luò)通暢的環(huán)境突然進(jìn)入信號(hào)較差的環(huán)境；而Web網(wǎng)站的使用場(chǎng)所比較穩(wěn)定，因此網(wǎng)絡(luò)信號(hào)相對(duì)比較穩(wěn)定?？紤]到這個(gè)因素，在具體設(shè)計(jì)時(shí)需要注意以下三點(diǎn)。

（1）移動(dòng)端用戶(hù)經(jīng)常于室外上網(wǎng)瀏覽，流量消耗較大。用戶(hù)在進(jìn)行一些消耗流量較大的操作時(shí)，可以設(shè)置流量提醒界面給予用戶(hù)提醒。流量提醒1.4

移動(dòng)端App和網(wǎng)站的交互差異1.4.4網(wǎng)絡(luò)環(huán)境的不同

（2）使用移動(dòng)端App時(shí)，經(jīng)常會(huì)遭遇網(wǎng)絡(luò)突然異常的情況，設(shè)計(jì)師應(yīng)該重視這類(lèi)情景下的異常狀態(tài)提示，以及如何從錯(cuò)誤中恢復(fù)。

（3）PC端用戶(hù)的網(wǎng)絡(luò)一般較為穩(wěn)定，但也不能忽略網(wǎng)絡(luò)異常狀態(tài)下的異常提示。頁(yè)面異常狀態(tài)提醒本章總結(jié)1.UI交互設(shè)計(jì)的基礎(chǔ)知識(shí)2.UI交互設(shè)計(jì)的基本流程3.移動(dòng)端App和網(wǎng)站交互設(shè)計(jì)的差異佳作賞析

平時(shí)所見(jiàn)的移動(dòng)端日歷App主界面，都是似墻一般的靜態(tài)日歷表。

而Vantage日歷App將界面設(shè)計(jì)成一個(gè)可以前后滾動(dòng)的跑道，手指滑動(dòng)跑道上所列日期時(shí)，界面中的跑道就會(huì)隨之前后滾動(dòng)，就像時(shí)間真的在流逝一樣。這個(gè)交互動(dòng)效的設(shè)計(jì)和創(chuàng)新使得這款A(yù)pp生動(dòng)、直觀(guān)、充滿(mǎn)趣味性。日常日歷界面Vantage日歷的主界面課后作業(yè)

根據(jù)UI交互設(shè)計(jì)自查表，對(duì)手機(jī)微信App進(jìn)行分析。步驟2按表中所示，一項(xiàng)項(xiàng)查看，如微信中支持什么手勢(shì)動(dòng)作，是否有沖突，是否容易混淆。步驟1從前期產(chǎn)品定位、用戶(hù)需求開(kāi)始，在網(wǎng)上查詢(xún)并結(jié)合如今微信使用情況，判斷產(chǎn)品是否符合定位。步驟3當(dāng)分析完成之后，參照UI交互設(shè)計(jì)自查表將分析結(jié)果使用簡(jiǎn)潔的語(yǔ)言列出來(lái)。UI謝謝觀(guān)看UIInteractionDesignCaseTutorialEND02UI交互設(shè)計(jì)規(guī)范和原則

UI交互設(shè)計(jì)需要基于現(xiàn)有的設(shè)備和技術(shù)，不同系統(tǒng)、不同尺寸的設(shè)備對(duì)UI交互設(shè)計(jì)有不同的要求，如果對(duì)現(xiàn)有設(shè)備的尺寸規(guī)范和交互方法不了解，那設(shè)計(jì)通常會(huì)事倍功半，設(shè)計(jì)出的作品也會(huì)漏洞百出。本章將介紹移動(dòng)端UI交互設(shè)計(jì)的一些常用尺寸規(guī)范和交互設(shè)計(jì)方法，希望通過(guò)本章的學(xué)習(xí)，學(xué)習(xí)者能夠制作出規(guī)范的作品。單元導(dǎo)讀★了解iOS系統(tǒng)和Android系統(tǒng)UI設(shè)計(jì)規(guī)范★掌握5W2H交互設(shè)計(jì)方法論知識(shí)目標(biāo)★緊跟科技發(fā)展的步伐，開(kāi)拓視野，增強(qiáng)民族榮譽(yù)感和自豪感

思政目標(biāo)★掌握UI交互設(shè)計(jì)的原則及其使用方法★學(xué)習(xí)相關(guān)設(shè)計(jì)規(guī)范，不斷提高自身的專(zhuān)業(yè)技能

技能目標(biāo)學(xué)習(xí)目標(biāo)2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.1有關(guān)iOS系統(tǒng)的基本概念iOS系統(tǒng)是由蘋(píng)果公司開(kāi)發(fā)的移動(dòng)操作系統(tǒng)，最初應(yīng)用于iPhone，后陸續(xù)套用到iPad、iPodtouch。操作界面美觀(guān)簡(jiǎn)潔、設(shè)備反應(yīng)迅速、操作流暢、安全性強(qiáng)等特點(diǎn)，使iOS系統(tǒng)受到了不少用戶(hù)的喜歡。在學(xué)習(xí)相關(guān)設(shè)計(jì)規(guī)范之前，我們先來(lái)簡(jiǎn)單了解有關(guān)iOS系統(tǒng)的基本概念。UI（1）像素（px）：是構(gòu)成圖像的最小單位，可以將其看作一個(gè)小方格，無(wú)數(shù)個(gè)不同顏色的小方格就構(gòu)成了畫(huà)面。像素并沒(méi)有固定的物理尺寸，其尺寸由載體決定。（2）屏幕尺寸：一般指屏幕的對(duì)角線(xiàn)長(zhǎng)度，單位為英寸（in），1in=2.54cm。（3）物理分辨率：是指屏幕的最佳分辨率，是屏幕固有的參數(shù)，不能調(diào)節(jié)，其表示方法為設(shè)備屏幕在水平和垂直方向上所擁有的像素相乘的數(shù)學(xué)表達(dá)式。屏幕尺寸邏輯分辨率物理分辨率倍率PPI像素iOS系統(tǒng)基本概念2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.1有關(guān)iOS系統(tǒng)的基本概念UI（4）PPI：英文全稱(chēng)pixelsperinch，是像素密度的簡(jiǎn)稱(chēng)，也是像素的密度單位；是連接數(shù)字世界與物理世界的橋梁，表示每英寸屏幕中排列的像素點(diǎn)數(shù)量。像素密度越高，屏幕顯示效果越清晰，細(xì)節(jié)越豐富，如下圖所示。（5）邏輯分辨率：是為使同樣尺寸的圖像在不同物理分辨率的設(shè)備上都能正常顯示而發(fā)明的參數(shù)，其單位為pt。在物理分辨率不同的設(shè)備中，只要設(shè)備的邏輯分辨率相同，它們的顯示效果就是相同的。1英寸，4px×4px

1英寸，8px×8px像素密度不同的兩張圖片2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.1有關(guān)iOS系統(tǒng)的基本概念UI6）倍率：通俗一點(diǎn)講就是指物理分辨率和邏輯分辨率之間的比例關(guān)系。如切圖名稱(chēng)的后綴@2x、@3x就是指倍率的數(shù)值。

★提示：大多數(shù)物理分辨率都等于邏輯分辨率×倍率。在@1x倍率圖中，1pt相當(dāng)于1px，在@2x倍率圖中，1pt相當(dāng)于2px，在@3x倍率圖中，1pt就相當(dāng)于3px。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范UI

在工作中，設(shè)計(jì)師遇到的設(shè)計(jì)規(guī)范問(wèn)題主要可以歸結(jié)為界面、布局、字體、圖標(biāo)、按鈕幾類(lèi)。

1．界面設(shè)計(jì)規(guī)范主要包括界面和界面元素的尺寸規(guī)范

1）常用設(shè)備尺寸

界面設(shè)計(jì)是基于設(shè)備的，界面尺寸由設(shè)備尺寸決定，只有先確定了界面大小才能深入去設(shè)計(jì)不同的界面元素。

通常設(shè)計(jì)師會(huì)以一種尺寸為基礎(chǔ)進(jìn)行設(shè)計(jì)，讓開(kāi)發(fā)去適配不同的設(shè)備。

例如，用Photoshop做設(shè)計(jì)稿或AfterEffects做UI交互動(dòng)效，一般會(huì)選擇750px×1334px或1125px×2436px，也可以選擇1170px×2532px。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范UI

2）界面元素尺寸規(guī)范

（1）狀態(tài)欄狀態(tài)欄位于手機(jī)界面最上方，倍率相同，設(shè)備屏幕尺寸和分辨率不同時(shí)，狀態(tài)欄的高度通常是相同的。而倍率不同，狀態(tài)欄的高度也會(huì)不同，一般在@1x倍率圖中，狀態(tài)欄的高度為20px；在@2x倍率圖中，狀態(tài)欄的高度為40px；在@3x倍率圖中，狀態(tài)欄的高度為132px（個(gè)別型號(hào)的設(shè)備除外，如iPhone8Plus、7Plus、6Plus、6sPlus型號(hào)中狀態(tài)欄的高度為60px，iPhone11、XR型號(hào)中狀態(tài)欄的高度為88px）。狀態(tài)欄是手機(jī)本身的顯示，UI設(shè)計(jì)師無(wú)須改變，只需要將界面中狀態(tài)欄的位置預(yù)留出來(lái)即可。狀態(tài)欄2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范UI（2）導(dǎo)航欄導(dǎo)航欄一般位于狀態(tài)欄的下方，在@1x倍率圖中，導(dǎo)航欄的高度為44px；在@2x倍率圖中，導(dǎo)航欄的高度為88px；在@3x倍率圖中，導(dǎo)航欄的高度為132px。（3）標(biāo)簽欄在@1x倍率圖中，界面底部的標(biāo)簽欄高度為49px；在@2x倍率圖中，標(biāo)簽欄的高度為98px；在@3x倍率圖中，標(biāo)簽欄的高度為147px。底部標(biāo)簽欄中的內(nèi)容可以根據(jù)不同的產(chǎn)品需求進(jìn)行設(shè)計(jì)?？偟膩?lái)說(shuō)，界面元素的尺寸隨倍率的變化而變化，如下圖所示。不同倍率下的控件尺寸2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范2．布局規(guī)范

1）全局邊距iPhone8Plus、7Plus、6Plus、6sPlus之后的型號(hào)與以往相比，由界面底部的主頁(yè)指示器（灰色橫杠）代替了以往的home鍵，因此在設(shè)計(jì)時(shí)也需要預(yù)留出主頁(yè)指示器的位置。一般來(lái)說(shuō)，@2x倍率圖中需預(yù)留高約68px的位置，@3x倍率圖中需預(yù)留100px～120px高的位置。有時(shí)為了使用戶(hù)將注意力集中在圖文本身，對(duì)視覺(jué)造成沖擊，會(huì)不留全局邊距。全局邊距的界面

不設(shè)置全局邊距的界面2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范2．布局規(guī)范

2）間距間距一般指卡片之間的距離。卡片式布局是移動(dòng)端界面的常見(jiàn)布局方式，卡片間距的大小由界面風(fēng)格和卡片承載信息的多少?zèng)Q定，并沒(méi)有固定的數(shù)值。常見(jiàn)間距有20px、24px、30px、40px等，通常不低于16px，過(guò)小的間距會(huì)使用戶(hù)瀏覽時(shí)產(chǎn)生緊張情緒，而過(guò)大的間距又會(huì)使界面變得松散。初學(xué)者可以使用常見(jiàn)數(shù)值，也可以在平時(shí)多關(guān)注其他界面的間距設(shè)置。但也不可一味仿制，最好能根據(jù)具體情況靈活設(shè)置。界面中的卡片間距設(shè)置2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范3．字體規(guī)范

1）字體在iOS9之后，蘋(píng)果推出了新的官方中文字體——蘋(píng)方，英文名為PingFangSC，專(zhuān)為中國(guó)用戶(hù)打造，是iOS和Mac操作系統(tǒng)的默認(rèn)中文字體。其具有現(xiàn)代感的外觀(guān)和優(yōu)美的字形有效提升了文字在手機(jī)和電腦屏幕上的清晰度和易讀性。該字體有6種字重可供選擇，同時(shí)支持中文簡(jiǎn)體和繁體的應(yīng)用，極大地滿(mǎn)足了設(shè)計(jì)師的設(shè)計(jì)需求。蘋(píng)方字體及其字重2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范3．字體規(guī)范

2）字號(hào)、字重、行距

iOS系統(tǒng)中不同文字的字號(hào)、字重和行距規(guī)范iOS操作系統(tǒng)界面中的文字一般都有規(guī)定的字號(hào)、字重和行距。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范3．字體規(guī)范

2）字號(hào)、字重、行距

表格中各文字在UI界面中的應(yīng)用如圖。

雖然界面文字有規(guī)定的字號(hào)與字重，但在進(jìn)行特殊設(shè)計(jì)時(shí)可在其基礎(chǔ)上適當(dāng)放大或縮小。

設(shè)計(jì)面向老年人的界面時(shí)，可以適當(dāng)加大每一層級(jí)文字的字號(hào)，在保證信息層級(jí)分明的情況下更便于老年人閱讀。iOS系統(tǒng)UI界面中的文字2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范3．字體規(guī)范

2）字號(hào)、字重、行距

另外，除了要注意iOS操作系統(tǒng)的文字規(guī)范，設(shè)計(jì)師在設(shè)計(jì)界面文字時(shí)還要注意以下三個(gè)問(wèn)題。（1）界面中的字體類(lèi)型不可太多。（3）強(qiáng)調(diào)重要信息，優(yōu)先考慮內(nèi)容

通過(guò)字體、字號(hào)、字重和文字顏色等突出重要信息（2）注意行距的應(yīng)用。

★提示：在界面設(shè)計(jì)中，文字顏色一般不使用純黑色，尤其是正文和大面積文字。在同色相、同明度下，一般純度越高文字越突出，因此一些重點(diǎn)內(nèi)容可以使用純度高的顏色來(lái)突出，其中最常用的就是紅色。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范4．圖標(biāo)規(guī)范

圖標(biāo)是UI中最常見(jiàn)的元素。iOS操作系統(tǒng)中的圖標(biāo)大致可分以下四種：

應(yīng)用商店圖標(biāo)

應(yīng)用程序圖標(biāo)

設(shè)置圖標(biāo)

通知圖標(biāo)2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范4．圖標(biāo)規(guī)范

圖標(biāo)決定了用戶(hù)對(duì)App的第一印象，同時(shí)也體現(xiàn)了產(chǎn)品調(diào)性和品牌形象。在iOS操作系統(tǒng)中，不同類(lèi)型圖標(biāo)在不同倍率的界面上有不同的尺寸規(guī)范。

iOS系統(tǒng)中不同類(lèi)型圖標(biāo)的尺寸規(guī)范2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范4．圖標(biāo)規(guī)范

除上述圖標(biāo)外，導(dǎo)航欄、工具欄、標(biāo)簽欄中也常用到圖標(biāo)，在設(shè)計(jì)時(shí)要避免混淆，并保證圖標(biāo)風(fēng)格、細(xì)節(jié)、樣式等統(tǒng)一。在iOS系統(tǒng)中，對(duì)此類(lèi)圖標(biāo)同樣有一定的規(guī)范。iOS系統(tǒng)中不同功能圖標(biāo)的尺寸規(guī)范

蘋(píng)果開(kāi)發(fā)者網(wǎng)站提供了系統(tǒng)圖標(biāo)，在設(shè)計(jì)上述圖標(biāo)時(shí)，可以直接從系統(tǒng)圖標(biāo)中選擇合適的圖標(biāo)來(lái)使用，也可以根據(jù)界面風(fēng)格自己設(shè)計(jì)圖標(biāo)。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范5．按鈕規(guī)范

1）按鈕狀態(tài)

iOS操作系統(tǒng)中的按鈕主要有四種狀態(tài)：正常狀態(tài)（normal）、選中狀態(tài)（selected）、高亮狀態(tài)（highlighted）、禁用狀態(tài)（disabled）。

為便于區(qū)分當(dāng)前按鈕所處狀態(tài)，不同狀態(tài)的按鈕要有不同的樣式。2.1iOS系統(tǒng)設(shè)計(jì)規(guī)范2.1.2iOS系統(tǒng)UI設(shè)計(jì)規(guī)范5．按鈕規(guī)范

2）按鈕樣式

iOS操作系統(tǒng)中的按鈕主要有以下三種樣式：

當(dāng)一個(gè)界面中同時(shí)出現(xiàn)兩個(gè)及以上按鈕時(shí)，可以使用不同的顏色或尺寸來(lái)體現(xiàn)按鈕的不同功能，給用戶(hù)傳達(dá)不同的信息。

例如，在接聽(tīng)電話(huà)界面中，總是用紅色的按鈕表示拒絕，綠色的按鈕表示接聽(tīng)，這樣即便在緊急情況下也可以很容易地分辨出哪個(gè)是接聽(tīng)鍵，哪個(gè)是拒絕鍵。按鈕設(shè)計(jì)

知識(shí)鏈接：Android系統(tǒng)中的按鈕規(guī)范與iOS系統(tǒng)中的按鈕規(guī)范大同小異。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.1有關(guān)Android系統(tǒng)的基本概念

與iOS操作系統(tǒng)不同的是，Android系統(tǒng)是一個(gè)開(kāi)放式系統(tǒng)，它允許任何移動(dòng)終端廠(chǎng)商的加入，這也導(dǎo)致了設(shè)備的多樣化與不統(tǒng)一性。針對(duì)Android系統(tǒng)的UI設(shè)計(jì)，也會(huì)涉及一些基本概念和常用單位，其中像素、屏幕尺寸、倍率等與iOS系統(tǒng)相同。除此之外，還有以下Android系統(tǒng)專(zhuān)用的概念與單位。DPI不同的兩個(gè)圖片（1）DPI：最初用來(lái)衡量打印機(jī)的打印精度，指打印物上每英寸的點(diǎn)數(shù)密度，一般來(lái)說(shuō)DPI數(shù)值越大，打印機(jī)的打印精度越高，圖片越精細(xì)。當(dāng)用于計(jì)算機(jī)屏幕時(shí)，DPI的本質(zhì)與PPI相同。（2）dp：全稱(chēng)deviceindependentpixels，意為密度獨(dú)立像素，是Android系統(tǒng)專(zhuān)用的長(zhǎng)度單位，與iOS系統(tǒng)中的pt相同。（3）sp：是Android系統(tǒng)中的專(zhuān)用字體單位。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范1．界面與布局規(guī)范

1）屏幕適配

Android系統(tǒng)的開(kāi)源性使其涉及的設(shè)備類(lèi)型繁多，沒(méi)有固定的尺寸參考，這給UI設(shè)計(jì)帶來(lái)了極大的挑戰(zhàn)。為便于對(duì)Android系統(tǒng)設(shè)備進(jìn)行管理，降低設(shè)計(jì)難度，提升適配度，官方根據(jù)屏幕的像素密度不同，將屏幕由低到高大致分為ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi六類(lèi)，不同密度屏幕對(duì)應(yīng)的各項(xiàng)數(shù)值。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范

與iOS系統(tǒng)一樣，為Android設(shè)備設(shè)計(jì)界面也會(huì)以一種尺寸為基礎(chǔ)，由開(kāi)發(fā)去適配不同的設(shè)備，通常這個(gè)尺寸會(huì)選用720px×1280px或1080px×1920px。

另外，為了在不同密度的屏幕上統(tǒng)一顯示元素，Android系統(tǒng)的UI設(shè)計(jì)規(guī)范常以dp和sp為單位，但在設(shè)計(jì)時(shí)，卻統(tǒng)一使用px，因此需要自行計(jì)算px與dp和sp之間的轉(zhuǎn)換關(guān)系。

在正常情況下，1dp等于像素密度為160的屏幕上的1個(gè)物理像素，因此dp和px之間的換算公式為：dp×dpi/160=px。

例如，當(dāng)屏幕的像素密度為320dpi時(shí)，1dp×320dpi/160=2px。由此可以算出，當(dāng)屏幕的密度為ldpi時(shí)，1dp=0.75px；為mdpi時(shí)，1dp=1px；為hdpi時(shí)，1dp=1.5px；為xhdpi時(shí)，1dp=2px；為xxhdpi時(shí)，441dp=3px；為xxxhdpi時(shí)，1dp=4px。sp和px之間的換算與dp和px相同。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范2）基準(zhǔn)網(wǎng)格

網(wǎng)格系統(tǒng)給予設(shè)計(jì)師一種規(guī)范和約束，可以保證界面元素及界面與界面之間的一致性，同時(shí)又不會(huì)妨礙設(shè)計(jì)師的想法和界面布局，還可以提高設(shè)計(jì)師的工作效率，減少溝通成本。

Android系統(tǒng)對(duì)基準(zhǔn)網(wǎng)格有著較為明確的規(guī)范，手機(jī)、平板等設(shè)備中的所有組件都與8dp的基準(zhǔn)網(wǎng)格對(duì)齊；工具欄中的圖標(biāo)和文字則與4dp的基準(zhǔn)網(wǎng)格對(duì)齊。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范3）間距與界面元素尺寸規(guī)范

在A(yíng)ndroid系統(tǒng)的手機(jī)界面中，全局邊距一般為16dp；當(dāng)頭像和文本列表采取左對(duì)齊樣式時(shí)，與圖標(biāo)、頭像相關(guān)聯(lián)的內(nèi)容左邊距為72dp。

狀態(tài)欄的高度為24dp，頂部工具欄的高度為56dp，底部工具欄的高度為48dp，標(biāo)題和列表欄的高度為72dp，副標(biāo)題的高度為48dp，內(nèi)容區(qū)域之間的間距為8dp。

Android系統(tǒng)的界面邊距

Android系統(tǒng)界面元素尺寸2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范2．字體規(guī)范Android系統(tǒng)語(yǔ)言文字English-like

typefacestypefaces（類(lèi)英語(yǔ)文字）Densetypefaces（密集文字）Talltypefaces（高大文字）

主要指英語(yǔ)和類(lèi)似英語(yǔ)的文字，如拉丁文、希臘文和西里爾文等。

Talltypefaces和Densetypefaces文字都需要額外的行高來(lái)適應(yīng)不同的字體，前者主要包括南亞、東南亞及中東地區(qū)的文字，而后者主要包括中文、日文和韓文。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范2．字體規(guī)范1）字體

Roboto為Android系統(tǒng)上的首選字體，主要支持英文和類(lèi)英文文字，該字體有六種字重用于匹配不同文本。

Noto是Roboto字體未涵蓋的所有語(yǔ)言的默認(rèn)字體，其中NotoSansCJK（CJK指中文、日文和韓文）為國(guó)內(nèi)常用的Android系統(tǒng)字體，該字體有七種字重可供選擇。Roboto字體

NotoSansCJK字體知識(shí)鏈接：NotoSansCJK是由Google和Adobe聯(lián)合開(kāi)發(fā)的開(kāi)源字體，Adobe將其稱(chēng)為SourceHanSans（思源黑體），而Google將其稱(chēng)為NotoSansCJK，并納入Noto字體家族。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范2．字體規(guī)范2）字號(hào)、字重、行距、字距

Android系統(tǒng)中字號(hào)的單位用sp表示，字與字之間的間距單位用dp表示，因此，在設(shè)計(jì)時(shí)需要將sp和dp轉(zhuǎn)換為相應(yīng)的px值。在A(yíng)ndroid系統(tǒng)界面中，文字的大小一般在12sp～24sp，不同文字的字體規(guī)范，見(jiàn)表所列。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范2．字體規(guī)范2）字號(hào)、字重、行距、字距

不同文字在UI界面中的位置。在具體應(yīng)用時(shí)，設(shè)計(jì)師可以基于文字樣式、產(chǎn)品屬性有針對(duì)性地進(jìn)行設(shè)置。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范3．圖標(biāo)規(guī)范Android系統(tǒng)中的圖標(biāo)類(lèi)型應(yīng)用程序圖標(biāo)系統(tǒng)圖標(biāo)應(yīng)用快捷操作圖標(biāo)2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范3．圖標(biāo)規(guī)范（1）應(yīng)用程序圖標(biāo)：在A(yíng)ndroid系統(tǒng)中，應(yīng)用程序圖標(biāo)的尺寸規(guī)范為48dp×48dp，邊緣為1dp。但在創(chuàng)建圖標(biāo)時(shí)，要求以400%（192dp×192dp）的比例查看和編輯圖標(biāo)，此時(shí)的邊緣為4dp。（2）系統(tǒng)圖標(biāo)：是系統(tǒng)提供的內(nèi)置圖標(biāo)，可用作工具欄、標(biāo)簽欄和應(yīng)用快捷操作圖標(biāo)，其尺寸規(guī)范為24dp×24dp，由于尺寸較小，在設(shè)計(jì)時(shí)要盡可能精簡(jiǎn)，以保證圖標(biāo)的可讀性和清晰度。系統(tǒng)圖標(biāo)大多采用幾何圖形，外觀(guān)較為對(duì)稱(chēng)。（3）應(yīng)用快捷操作圖標(biāo)：應(yīng)用快捷操作圖標(biāo)可以讓用戶(hù)輕松快速地訪(fǎng)問(wèn)應(yīng)用。在通常情況下，應(yīng)用快捷操作圖標(biāo)就是將一個(gè)系統(tǒng)圖標(biāo)放置在圓形的安全區(qū)域中心，它的尺寸規(guī)范為直徑48dp的圓形，其中包括直徑44dp的安全區(qū)域和安全區(qū)域周?chē)?dp邊距。

Android系統(tǒng)的開(kāi)放性使其設(shè)計(jì)較為靈活，對(duì)于應(yīng)用商店圖標(biāo)、設(shè)置圖標(biāo)和通知圖標(biāo)等沒(méi)有明確的規(guī)范，可在實(shí)際工作中根據(jù)情況靈活處理。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范4．色彩規(guī)范1）界面中的顏色界面中的顏色可分為主色和輔助色。主色指界面中出現(xiàn)最頻繁的顏色。不同深淺的主色有助于區(qū)分界面中的不同區(qū)域，如區(qū)分狀態(tài)欄和工具欄。輔助色用來(lái)強(qiáng)調(diào)UI中的關(guān)鍵部分，可以與主色互補(bǔ)，也可以與主色類(lèi)似，但不能是基于主色的簡(jiǎn)單加深或變淺。用主色區(qū)分區(qū)域

用輔助色強(qiáng)調(diào)按鈕2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范4．色彩規(guī)范2）文本可讀性

界面中的所有文本都應(yīng)該是清晰易讀的，而顏色在文本可讀性中起著重要作用。在設(shè)置文本顏色時(shí)，建議在暗色背景中使用亮色文本，在亮色背景中使用暗色文本，并且文本顏色與背景要有足夠的對(duì)比。

不同的文本要使用不同的不透明度，以增強(qiáng)界面層次感，不同背景中的文本不透明度。不同背景中的文本不透明度2.2Android系統(tǒng)設(shè)計(jì)規(guī)范2.2.2Android系統(tǒng)UI設(shè)計(jì)規(guī)范4．色彩規(guī)范2）文本可讀性

在不同背景中，使用不同顏色文本的不透明度效果。不同背景中的文本不透明度★在設(shè)計(jì)iOS系統(tǒng)界面時(shí)，可參考上述色彩規(guī)范，也可到官網(wǎng)查看相關(guān)規(guī)范。知識(shí)鏈接

2019年8月9日，華為鴻蒙系統(tǒng)正式發(fā)布；2021年6月2日晚，華為正式發(fā)布了多款搭載HarmonyOS2的產(chǎn)品，這標(biāo)志著中國(guó)科技的進(jìn)步與崛起，也意味著我們有了自己的移動(dòng)操作系統(tǒng)。相信在不久的將來(lái)，針對(duì)鴻蒙系統(tǒng)的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)也將出現(xiàn)?？萍贾?.2Android系統(tǒng)設(shè)計(jì)規(guī)范案例練習(xí)2-1對(duì)美團(tuán)App首頁(yè)界面進(jìn)行剖析步驟2此時(shí)打開(kāi)的美團(tuán)界面會(huì)顯示在畫(huà)布中間，選擇軟件界面左側(cè)工具欄中吸管工具組中的標(biāo)尺工具，在要測(cè)量元素的一側(cè)邊界按住鼠標(biāo)左鍵不放，并拖動(dòng)鼠標(biāo)至另一側(cè)后釋放，在拖動(dòng)鼠標(biāo)時(shí)可以按住快捷鍵“Shift”以保持其水平或垂直移動(dòng)，此時(shí)起點(diǎn)和終點(diǎn)之間就會(huì)有一條線(xiàn)。步驟1首先啟動(dòng)Photoshop；然后按快捷鍵“Ctrl+O”，在彈出的“打開(kāi)”對(duì)話(huà)框中選擇配套素材“素材與實(shí)例/第2章/美團(tuán)界面.png”；最后單擊“打開(kāi)”按鈕，打開(kāi)美團(tuán)界面。提示：在使用標(biāo)尺工具測(cè)量界面尺寸時(shí)，可以在元素邊界添加輔助線(xiàn)（按快捷鍵“Ctrl+R”顯示標(biāo)尺，然后將光標(biāo)移至標(biāo)尺上，接著按住鼠標(biāo)左鍵并拖動(dòng)至元素邊界后釋放，即可添加一條參考線(xiàn)），這樣在測(cè)量時(shí)方便標(biāo)尺工具與元素邊界對(duì)齊，以保證測(cè)量的準(zhǔn)確性。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范案例練習(xí)2-1對(duì)美團(tuán)App首頁(yè)界面進(jìn)行剖析步驟3

選擇“窗口/測(cè)量記錄”菜單項(xiàng)，在畫(huà)布下方會(huì)彈出測(cè)量記錄界面，單擊該界面左上角的“記錄測(cè)量”按鈕，就可以看到前面測(cè)量線(xiàn)的長(zhǎng)度。

標(biāo)尺工具圖

使用標(biāo)尺工具進(jìn)行測(cè)量

選擇“窗口/測(cè)量記錄”菜單項(xiàng)查看測(cè)量記錄2.2Android系統(tǒng)設(shè)計(jì)規(guī)范案例練習(xí)2-1對(duì)美團(tuán)App首頁(yè)界面進(jìn)行剖析步驟4

用工具欄中的吸管工具在所要選取的顏色上單擊，此時(shí)軟件界面左側(cè)的工具欄中會(huì)顯示所選顏色，單擊設(shè)置前景色工具會(huì)彈出“拾色器”對(duì)話(huà)框。“拾色器”對(duì)話(huà)框2.2Android系統(tǒng)設(shè)計(jì)規(guī)范案例練習(xí)2-1對(duì)美團(tuán)App首頁(yè)界面進(jìn)行剖析步驟5

用工具欄中的文字工具在畫(huà)布中單擊并拖動(dòng)鼠標(biāo)，拖出一個(gè)文字框，在其中輸入文字，利用工具屬性欄（如圖所示）改變文字字號(hào)，來(lái)判斷首頁(yè)界面不同文字的字號(hào)。工具屬性欄提示：iOS系統(tǒng)的字號(hào)規(guī)范是基于@2x倍率的界面尺寸設(shè)定的，在@3x倍率圖中需要進(jìn)行簡(jiǎn)單的計(jì)算，當(dāng)規(guī)定字號(hào)為28點(diǎn)時(shí)，它在@3x倍率圖中的字號(hào)就應(yīng)當(dāng)是：28÷2×3=42點(diǎn)。2.2Android系統(tǒng)設(shè)計(jì)規(guī)范案例練習(xí)2-1對(duì)美團(tuán)App首頁(yè)界面進(jìn)行剖析使用上述方法測(cè)量并總結(jié)得出以下五點(diǎn)結(jié)論。（1）主色：該美團(tuán)App首頁(yè)界面以“#f7d247”為主色。（2）字號(hào)：大標(biāo)題為51點(diǎn)，標(biāo)題為42點(diǎn)，副標(biāo)題為33點(diǎn)。（3）文本不透明度：該界面為亮色背景，因此使用了暗色文本（#000000），標(biāo)題和圖標(biāo)文字為主要文本，搜索框中的文字為輔助文本，界面中主要文本的不透明度明顯高于輔助文本的不透明度。（4）界面布局：狀態(tài)欄高度為132px，導(dǎo)航欄高度為132px，標(biāo)簽欄高度為147px，標(biāo)簽欄下方所預(yù)留的主頁(yè)指示器的高度為112px，全局邊距為45px。（5）圖標(biāo)：在正文中，圖標(biāo)大小為96px×96px；在標(biāo)簽欄中，圖標(biāo)大小為69px×69px。將上述數(shù)據(jù)與UI設(shè)計(jì)規(guī)范作對(duì)比，可以發(fā)現(xiàn)美團(tuán)App的界面基本上是按照UI設(shè)計(jì)規(guī)范去設(shè)計(jì)的。例如，使用了規(guī)范的界面布局；在彩色背景中，使用了暗色文本（#000000），文本清晰易讀；不同樣式的文字使用了不同字號(hào)，界面主次分明。2.3交互設(shè)計(jì)方法論——5W2H2.3.15W2H分析法是什么

5W2H分析法又叫“七何分析法”，它簡(jiǎn)單、方便，易于理解，富有啟發(fā)意義，有助于彌補(bǔ)考慮問(wèn)題中的疏漏，被廣泛應(yīng)用于企業(yè)管理和技術(shù)活動(dòng)中。

5W2H由5個(gè)以W開(kāi)頭的單詞和兩個(gè)以H開(kāi)頭的單詞組成，它主要從7個(gè)方向進(jìn)行設(shè)問(wèn)，從中發(fā)現(xiàn)解決問(wèn)題的線(xiàn)索，尋找設(shè)計(jì)思路，進(jìn)行設(shè)計(jì)構(gòu)思，從而對(duì)產(chǎn)品進(jìn)行發(fā)明與創(chuàng)新。2.3交互設(shè)計(jì)方法論——5W2H2.3.15W2H分析法是什么

5W2H分析法是通過(guò)提問(wèn)、反思，來(lái)解決問(wèn)題，并進(jìn)行創(chuàng)新。它的應(yīng)用面較為廣泛，應(yīng)用方式比較靈活，在UI交互設(shè)計(jì)領(lǐng)域也非常適用。它的具體內(nèi)容如下。（1）Who：誰(shuí)？由誰(shuí)來(lái)做？Who指用戶(hù)和整個(gè)流程中所涉及的人員，需要考慮用戶(hù)特征和用戶(hù)需求，還要考慮由誰(shuí)來(lái)設(shè)計(jì)、決策，能力是否足夠，后期維護(hù)是否可以做到。（2）What：是什么？目的是什么？做什么工作？What指功能，具體要實(shí)現(xiàn)哪些功能，也就是用戶(hù)使用產(chǎn)品可以實(shí)現(xiàn)哪些目標(biāo)，完成哪些事情。（3）Why：為什么要做？可不可以不做？有沒(méi)有代替方法？Why指尋找原因，為什么要做這個(gè)功能？此功能是否有做下去的價(jià)值？考慮產(chǎn)品功能是否需要優(yōu)化、是否需要?jiǎng)h減。2.3交互設(shè)計(jì)方法論——5W2H2.3.15W2H分析法是什么（4）When：何時(shí)？什么時(shí)間做？什么時(shí)機(jī)最合適？對(duì)于UI交互設(shè)計(jì)師來(lái)說(shuō)，需要考慮產(chǎn)品上線(xiàn)時(shí)間，設(shè)計(jì)的功能是否可以在計(jì)劃時(shí)間內(nèi)完成，是否需要分批上線(xiàn)或刪減內(nèi)容；用戶(hù)使用此功能需要多長(zhǎng)時(shí)間，用戶(hù)是否愿意花費(fèi)時(shí)間來(lái)使用此功能。（5）Where：何處？在哪里做？對(duì)于UI交互設(shè)計(jì)師來(lái)說(shuō)，需要考慮此產(chǎn)品是在PC端運(yùn)行還是在移動(dòng)端運(yùn)行，此功能要放在哪個(gè)模塊之下；用戶(hù)在使用此產(chǎn)品或功能時(shí)，是在何種環(huán)境之下，有哪些影響產(chǎn)品運(yùn)行環(huán)境的因素。（6）How：怎么做？如何提高效率？如何實(shí)施？方法是什么？How指真正了解用戶(hù)是如何操作的，操作習(xí)慣；整體方案如何實(shí)施；產(chǎn)品的具體界面設(shè)計(jì)；設(shè)計(jì)的產(chǎn)品是否符合用戶(hù)習(xí)慣。（7）Howmuch：多少？做到什么程度？數(shù)量如何？質(zhì)量水平如何？費(fèi)用產(chǎn)出如何？Howmuch指用戶(hù)花費(fèi)資金與產(chǎn)品功能是否等值；產(chǎn)品的開(kāi)發(fā)成本，運(yùn)營(yíng)和維護(hù)成本。5W2H方法論意在指引同學(xué)們養(yǎng)成良好的、獨(dú)立的思考習(xí)慣，培養(yǎng)發(fā)散性思維，它可以運(yùn)用于交互設(shè)計(jì)流程的某一項(xiàng)目，也可以貫穿全程。但要注意的是，不同的設(shè)計(jì)項(xiàng)目需要提出不同的問(wèn)題，這是需要設(shè)計(jì)師經(jīng)過(guò)深思熟慮才能提出的，不可死記硬背并照搬他人，否則會(huì)變得沒(méi)有意義。2.3交互設(shè)計(jì)方法論——5W2H2.3.25W2H分析法的重要性提出疑問(wèn)是發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的前提，而5W2H方法論的本質(zhì)就是引導(dǎo)設(shè)計(jì)師提出疑問(wèn)。5W2H方法論指導(dǎo)設(shè)計(jì)1.可以準(zhǔn)確界定問(wèn)題，清晰表述問(wèn)題，提高工作效率。2.可以掌握產(chǎn)品和用戶(hù)需求的本質(zhì)，抓住產(chǎn)品的骨架，提高創(chuàng)新能力。3.有助于理清設(shè)計(jì)思路，更加全面地思考問(wèn)題，避免在設(shè)計(jì)流程中遺漏項(xiàng)目。2.4交互設(shè)計(jì)的原則2.4.1人機(jī)交互界面設(shè)計(jì)的基本原則

出色的交互界面更容易吸引用戶(hù)，受到用戶(hù)青睞；人性化的設(shè)計(jì)，則可以增加用戶(hù)對(duì)應(yīng)用程序的黏性。而要想設(shè)計(jì)出吸引人的、邏輯清晰的交互界面，就需要了解并掌握以下幾個(gè)原則。1．美學(xué)完整性

美學(xué)完整性并不是要求設(shè)計(jì)出的界面有多么好看，而是要求應(yīng)用程序的視覺(jué)界面、交互行為和功能更加匹配。2．一致性

人機(jī)交互界面的一致性，指在設(shè)計(jì)時(shí)遵守有關(guān)系統(tǒng)的設(shè)計(jì)規(guī)范，盡量使用系統(tǒng)提供的界面元素、圖標(biāo)和文本樣式，保持應(yīng)用程序整體的風(fēng)格統(tǒng)一，且包含人們所熟悉和期望的功能與行為。

例如，一款應(yīng)用程序的目的是幫助用戶(hù)完成某項(xiàng)任務(wù)，在設(shè)計(jì)時(shí)就應(yīng)該使用一些標(biāo)準(zhǔn)化的控件和交互行為，或是一些不太明顯的背景和圖案作為點(diǎn)綴，旨在給用戶(hù)傳達(dá)清晰的信息，突出應(yīng)用程序的目的，便于用戶(hù)理解和操作。

2.4交互設(shè)計(jì)的原則2.4.1人機(jī)交互界面設(shè)計(jì)的基本原則3．直接操作

直接操作是指直接與屏幕上的對(duì)象進(jìn)行交互，而非通過(guò)按鈕交互，使用戶(hù)更能理解自己的任務(wù)和操作結(jié)果，提高用戶(hù)的參與感。

例如，用戶(hù)直接旋轉(zhuǎn)設(shè)備或通過(guò)滑動(dòng)等手勢(shì)即可影響屏幕中的內(nèi)容，而不需要通過(guò)鍵盤(pán)、按鈕等控制屏幕內(nèi)容。又如，使用手指滑動(dòng)模擬拆包裝動(dòng)效，有效提升了用戶(hù)參與感與體驗(yàn)感。直接操作2.4交互設(shè)計(jì)的原則2.4.1人機(jī)交互界面設(shè)計(jì)的基本原則

4．隱喻

當(dāng)虛擬的物品和操作行為與現(xiàn)實(shí)生活中的物品有相似性時(shí)，用戶(hù)就可以快速學(xué)會(huì)此操作。

例如，在界面中，用戶(hù)通過(guò)輕掃來(lái)翻閱書(shū)籍，就與現(xiàn)實(shí)生活中人們翻閱書(shū)籍的操作相似，因此用戶(hù)可以很快理解并掌握這個(gè)操作。

交互設(shè)計(jì)中的隱喻可以不受現(xiàn)實(shí)生活的限制。例如，在現(xiàn)實(shí)生活中，文件夾可放內(nèi)容是十分有限的，并且只能放紙質(zhì)文件，而在計(jì)算機(jī)中則可以放入很多音樂(lè)、視頻、文檔等文件。5．用戶(hù)控制

在交互設(shè)計(jì)中，讓用戶(hù)來(lái)控制操作行為，應(yīng)用程序可以對(duì)用戶(hù)提供建議，并對(duì)可能造成嚴(yán)重后果的操作行為發(fā)出警告，但不應(yīng)該替用戶(hù)做決定，好的設(shè)計(jì)可以在用戶(hù)行為和不想要的結(jié)果之間做出平衡，巧妙化解錯(cuò)誤的發(fā)生。在通常情況下，用戶(hù)會(huì)希望在某些操作時(shí)可以進(jìn)行確認(rèn)，并且可以隨時(shí)停止或取消操作，這都是交互設(shè)計(jì)中需要考慮的問(wèn)題。2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則

尼爾森十大原則由人機(jī)交互學(xué)博士雅各布·尼爾森（JakobNielsen）于1995年1月1日發(fā)表，該原則用于評(píng)價(jià)用戶(hù)體驗(yàn)的好壞，交互設(shè)計(jì)師也可以根據(jù)這十大原則來(lái)指導(dǎo)設(shè)計(jì)和對(duì)產(chǎn)品進(jìn)行自查。本節(jié)將結(jié)合案例深入講解尼爾森十大原則的具體內(nèi)容，幫助同學(xué)們更好地理解并應(yīng)用到設(shè)計(jì)之中。1．系統(tǒng)狀態(tài)可見(jiàn)原則

系統(tǒng)狀態(tài)可見(jiàn)指用戶(hù)在界面上的任何操作，無(wú)論是單擊、滾動(dòng)還是按下鍵盤(pán)，頁(yè)面都應(yīng)該及時(shí)給出反饋，讓用戶(hù)清楚當(dāng)前處于什么狀態(tài)。

2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則

例如，在A(yíng)pp界面中點(diǎn)擊愛(ài)心，圖案會(huì)由白色線(xiàn)條變?yōu)轱@眼的紅色圖形，界面下方也會(huì)有已收藏的提示字樣，及時(shí)給予用戶(hù)收藏成功的反饋；在A(yíng)pp界面中點(diǎn)贊，會(huì)出現(xiàn)鼓勵(lì)的文案和很多表情包，在給予用戶(hù)清楚反饋的同時(shí)又兼具趣味性。App界面的及時(shí)反饋2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則2．環(huán)境貼切原則

使用用戶(hù)熟悉的語(yǔ)言、文字、短語(yǔ)及概念，而非系統(tǒng)術(shù)語(yǔ)，遵循現(xiàn)實(shí)世界的慣例和思考邏輯，使界面信息盡可能地貼近現(xiàn)實(shí)世界，以便用戶(hù)理解和使用。3．可控原則

用戶(hù)要能對(duì)當(dāng)前情況有很好的了解和掌控，能夠自由地操作軟件。例如，當(dāng)App遇到卡頓時(shí)，雙擊home鍵可以退出，消息發(fā)送錯(cuò)誤可以撤回，訂單下錯(cuò)可以申請(qǐng)取消，軟件中設(shè)置有重做和撤銷(xiāo)功能等。相機(jī)和時(shí)鐘圖標(biāo)

撤銷(xiāo)、重做功能

2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則4．一致性原則

對(duì)于用戶(hù)來(lái)說(shuō)，相同的語(yǔ)言、按鈕、操作行為應(yīng)該觸發(fā)相同的事件，所以在設(shè)計(jì)時(shí)要遵循平臺(tái)慣例，從結(jié)構(gòu)、色彩、操作、反饋、文字等方面保持一致。5．防錯(cuò)原則

比出現(xiàn)錯(cuò)誤提示更好的設(shè)計(jì)是避免錯(cuò)誤發(fā)生，設(shè)計(jì)師可以通過(guò)對(duì)產(chǎn)品界面的設(shè)計(jì)、重組與安排來(lái)防止用戶(hù)產(chǎn)生混淆，導(dǎo)致錯(cuò)誤操作的發(fā)生，或者將錯(cuò)誤發(fā)生的可能性降到最低。

去哪兒旅行App中，用戶(hù)在購(gòu)票選擇日期時(shí)，已過(guò)去的日期會(huì)變?yōu)榛疑?，不可被選中，這有效防止了用戶(hù)因誤操作導(dǎo)致選錯(cuò)日期而產(chǎn)生負(fù)面情緒。

2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則6．易取原則

盡可能減少用戶(hù)的記憶負(fù)擔(dān)，將動(dòng)作、選項(xiàng)和頁(yè)面信息設(shè)計(jì)為可視化，應(yīng)用程序的使用指南也應(yīng)該是可見(jiàn)的，并且可以隨時(shí)調(diào)用。7．靈活高效原則

中級(jí)用戶(hù)的數(shù)量遠(yuǎn)高于初級(jí)和高級(jí)用戶(hù)，在設(shè)計(jì)時(shí)要考慮大多數(shù)用戶(hù)的需求，但也不能低估和輕視少數(shù)用戶(hù)的需求，保持應(yīng)用設(shè)計(jì)的靈活高效性，盡可能滿(mǎn)足所有用戶(hù)的需求。

微信表情包中的“最近使用”模塊，將用戶(hù)經(jīng)常使用的表情包放到界面上方，大大縮短了用戶(hù)尋找表情包的時(shí)間，體現(xiàn)出了交互設(shè)計(jì)的靈活高效性。2.4交互設(shè)計(jì)的原則2.4.2尼爾森十大原則8．易掃原則

易掃原則是指在界面設(shè)計(jì)中突出重點(diǎn)信息，弱化次要信息，讓信息結(jié)構(gòu)一目了然，使用戶(hù)可以快速準(zhǔn)確地獲取重要信息。支付寶理財(cái)界面在這方面就做得很好。9．容錯(cuò)原則

容錯(cuò)原則是指能夠幫助用戶(hù)從錯(cuò)誤狀態(tài)中恢復(fù)，將損失降到最低，當(dāng)無(wú)法恢復(fù)時(shí)，要提供詳細(xì)說(shuō)明和解決建議，只給一個(gè)簡(jiǎn)單的錯(cuò)誤代碼