區(qū)塊鏈技術(shù)與電子商務(wù)應(yīng)用 課件 【ch05】ios規(guī)范及工具APP視覺設(shè)計(jì)

ios規(guī)范及工具APP視覺設(shè)計(jì)第五章新工科建設(shè)·應(yīng)用型本科規(guī)劃教材UI設(shè)計(jì)實(shí)戰(zhàn)App類型及特點(diǎn)0101App類型及特點(diǎn)App類型效率型(高效性)目前，對(duì)App主要通過功能、用戶群、界面布局、視覺設(shè)計(jì)風(fēng)格等方面進(jìn)行分類。通過設(shè)計(jì)規(guī)范、界面層級(jí)數(shù)量、交互設(shè)計(jì)、視覺設(shè)計(jì)風(fēng)格四個(gè)維度為App進(jìn)行分類是比較少見的，這種分類方法更容易理解App的設(shè)計(jì)特點(diǎn)，也方便初學(xué)者梳理、掌握不同類型App的特點(diǎn)。效率型App是指能夠幫助用戶快速完成一個(gè)任務(wù)，注重內(nèi)容的組織邏輯功能和信息架構(gòu)的展現(xiàn)，以方便用戶快速、高效使用，最終完成任務(wù)。此類應(yīng)用一般包含大量的列表及每個(gè)列表中的任務(wù)功能。最典型的就是系統(tǒng)自帶的“Mal”應(yīng)用，這是一個(gè)非常典型的效率型應(yīng)用。01App類型及特點(diǎn)效率型(高效性)另外，此類應(yīng)用給用戶的感覺是層層進(jìn)入，內(nèi)容逐步具體化，直到可以完成用戶的任務(wù)。例如，淘寶App能夠快速引導(dǎo)用戶購買到心儀的商品；購物時(shí)，微信App可以快速、準(zhǔn)確地引導(dǎo)用戶進(jìn)入付款掃碼界面，完成支付操作。示例如圖5.1、圖5.2所示。01App類型及特點(diǎn)工具型工具型App是指能夠按照用戶需求，便捷地幫助用戶完成一項(xiàng)工作。此類應(yīng)用一般交互操作非常少，也沒有很深的層次結(jié)構(gòu)，往往都是直接展示信息。例如，墨跡天氣可以在用戶想要查看天氣情況時(shí)，快速查詢到當(dāng)前準(zhǔn)確的天氣情況，并且還能查詢到其他相關(guān)的天氣信息，滿足用戶需求；計(jì)算器可以幫助用戶進(jìn)行數(shù)據(jù)計(jì)算。示例圖5.3、圖5.4所示。01App類型及特點(diǎn)沉浸型沉浸型App是指能夠讓用戶在“無感”的情況下使用App,使用戶忽略時(shí)間、環(huán)境的影響，專注一個(gè)任務(wù)或娛樂的深入體驗(yàn)，沒有過多的文字，而將用戶的注意力放在如何使用它。例如，游戲類App、視頻類App。示例如圖5.5、圖5.6所示。01App類型及特點(diǎn)三種類型App的區(qū)別如表5.1所示。01App類型及特點(diǎn)主題把握要精準(zhǔn)在設(shè)計(jì)App過程中，首先要考慮的是產(chǎn)品定位和產(chǎn)品主題，也就是說，要設(shè)計(jì)一個(gè)什么類型的App,將來要提供給什么樣的用戶來使用。例如，準(zhǔn)備設(shè)計(jì)一個(gè)旅游類的App,首先要確定給什么樣的用戶使用，是大學(xué)生、公司白領(lǐng)、新婚夫婦還是中產(chǎn)階級(jí)?不同的用戶對(duì)產(chǎn)品的需求是不一樣的，必須針對(duì)不同的用戶需求來設(shè)置功能，所以一定要將主題定位把握精準(zhǔn)。同時(shí)針對(duì)確定好的主題，再確定設(shè)計(jì)產(chǎn)品的主色調(diào)、設(shè)計(jì)風(fēng)格、界面布局等，示例如圖5.7所示。01App類型及特點(diǎn)注意持握手機(jī)的習(xí)慣設(shè)計(jì)App時(shí)，還要考慮用戶在操作時(shí)的操作習(xí)慣，盡可能將功能操作設(shè)置在用戶習(xí)慣的位置處，便于用戶習(xí)慣性操作與習(xí)慣性的延續(xù)，提高產(chǎn)品的體驗(yàn)?？紤]用戶持握手機(jī)的習(xí)慣非常重要。用戶大部分的操作時(shí)間都是采用單手持握手機(jī)的方式，如坐公交車時(shí)，單手扶把手，單手操作手機(jī)；當(dāng)然在操作過程中，還有雙手持握手機(jī)的時(shí)候，如玩游戲，雙手大拇指控制各種操作?；蛘呖匆曨l時(shí)，為了最大化顯示內(nèi)容，用戶也會(huì)愿意橫屏顯示。所以在設(shè)計(jì)產(chǎn)品時(shí)就要充分考慮大拇指的活動(dòng)范圍，將重要功能按鍵放在控制區(qū)內(nèi)(一般考慮右手持握的情況)。示例如圖5.8所示。01App類型及特點(diǎn)橫豎屏的變化與重力感應(yīng)很多用戶在使用手機(jī)之初就將橫豎屏切換功能關(guān)閉，或者大部分App根據(jù)實(shí)際情況直接將App的界面方向設(shè)定好，如使用QQApp時(shí)，默認(rèn)為豎屏顯示，而觀看視頻時(shí)，默認(rèn)為橫屏顯示。但手機(jī)在使用的過程中不管是通過物理重力感應(yīng)觸發(fā)，還是用戶手動(dòng)觸發(fā)，都會(huì)遇到橫豎屏切換的功能需求。因此，在進(jìn)行UI設(shè)計(jì)時(shí)，要考慮不同屏幕顯示時(shí)內(nèi)容展示的合理性、功能的通用性及操作的便利性。示例如圖5.9所示。01App類型及特點(diǎn)設(shè)計(jì)界面層級(jí)清晰、操作方式一目了然App在設(shè)計(jì)界面時(shí)層級(jí)清晰是非常重要的。App的功能越強(qiáng)大，界面層級(jí)越要清晰，操作邏輯也越要縝密，清晰的界面層級(jí)可以讓用戶在操作過程中明確自己“我在哪里，該做什么，該怎么做”,讓用戶盡可能在“無感”的狀態(tài)下，順利完成操作。保證用戶在操作時(shí)能夠按照預(yù)想的流程進(jìn)行，必須保證操作方式一目了然。畢竟，用戶在使用產(chǎn)品時(shí)，設(shè)計(jì)師不能在旁邊指導(dǎo)，也不能為App如何使用附帶一份使用說明書，所有的操作都需要用戶在實(shí)際使用過程獨(dú)立探索和熟悉。因此，設(shè)計(jì)師在設(shè)計(jì)時(shí)就要充分考慮如何能夠讓用戶快速了解功能，解鎖操作方式。01App類型及特點(diǎn)遵循手指觸摸的習(xí)慣在App操作的過程中，都是通過手指來進(jìn)行控制的。當(dāng)然手指的一個(gè)最重要問題是它比鼠標(biāo)指針大得多，靈敏度和精確度會(huì)有所欠缺，所以建議最佳觸摸區(qū)域不能低于寬、高均為44px的區(qū)域，如圖5.13所示。因此在界面設(shè)計(jì)時(shí)，要保證手指可接觸區(qū)域夠大、控件夠大，控件數(shù)目較多時(shí)還要注意控件之間的間距要夠大，以減少誤操作。另外，屏幕邊緣觸感不靈敏，重要的按鈕不要太靠邊，不利于操作。還有一些同時(shí)使用鼠標(biāo)和鍵盤的操作(如復(fù)制、粘貼、選擇文字)是手指很難完成的。設(shè)計(jì)上應(yīng)該考慮由此帶來的影響，避免濫用。當(dāng)然，如果設(shè)計(jì)的App支持比較復(fù)雜的手勢(shì)(長按、捏合),那么就要確保用戶能夠理解它們的含義，并且為這些手勢(shì)操作提供直接的響應(yīng)反饋，如圖5.14所示。01App類型及特點(diǎn)遵循手指觸摸的習(xí)慣01App類型及特點(diǎn)讓用戶看到操作的及時(shí)反饋在App操作的過程中，要讓用戶看到操作的及時(shí)反饋，這是非常重要的。通常反饋都會(huì)在用戶操作完一步之后，及時(shí)出現(xiàn)引導(dǎo)用戶進(jìn)行下一步操作。用戶在操作時(shí)的耐心是有限的，如果不能及時(shí)給予反饋，那么很快就會(huì)使用戶失去耐心，容易讓用戶急躁，影響用戶體驗(yàn)，甚至?xí)ミ@個(gè)用戶。常用的反饋有聲音反饋、震動(dòng)反饋等。示例如圖5.15、圖5.16所示。01App類型及特點(diǎn)讓用戶看到操作的及時(shí)反饋

單擊：一個(gè)手指按下，提起，按壓或者選擇一個(gè)控件/選項(xiàng)，常用于打開App、打開開關(guān)控件等操作。

拖曳：一個(gè)手指按下，移動(dòng)再提起，拖動(dòng)某個(gè)控件從一邊移動(dòng)到另一邊，常用于整理桌面圖標(biāo)等操作。

滑動(dòng)：一個(gè)手指按下，滾動(dòng)或平移后再提起，四個(gè)方向均可滑動(dòng)，常用于瀏覽信息等操作。

輕掃：一個(gè)手指短暫接觸，滾動(dòng)或平移再提起，一般為左右兩個(gè)方向，常用于呼出隱藏菜單或刪除按鈕等操作。

雙擊：一個(gè)手指快速、連續(xù)兩次按下，提起。常用于放大、縮小圖片或內(nèi)容，或者在導(dǎo)航App中定位使用操作。捏合：雙指按下，向內(nèi)移動(dòng)，再提起。常用于放大、縮小圖片或內(nèi)容，瀏覽信息等操作。長按：一只手指按下，稍后再提起，呼出編輯狀態(tài)或隱藏菜單，常用于對(duì)文章內(nèi)容進(jìn)行復(fù)制、粘貼、全選等操作。搖晃：手持手機(jī)，進(jìn)行搖動(dòng)。常用于撤銷或重做，但在國內(nèi)常用于搶紅包等操作。01App類型及特點(diǎn)減少視覺干擾減少刺激顏色使用顏色搭配是UI設(shè)計(jì)過程中一個(gè)比較耗時(shí)的階段，設(shè)計(jì)師有時(shí)需要花幾個(gè)小時(shí)才能選擇正確的顏色。在選擇顏色時(shí)顏色數(shù)量一般不超過3種，盡量減少視覺干擾，多選用高級(jí)灰色和素色，盡可能減少刺激顏色的使用，以防止造成用戶視覺疲勞。當(dāng)然，為兒童設(shè)計(jì)App時(shí)，或者為喜歡高飽和度顏色的地區(qū)用戶設(shè)計(jì)App時(shí)，所用的顏色飽和度就要偏高一些。示例如圖5.18、圖5.19所示。01App類型及特點(diǎn)常用的設(shè)置顏色的方法有以下三種沿用啟動(dòng)圖標(biāo)顏色或企業(yè)Logo顏色為App主色調(diào)，如圖5.20、圖5.21所示。01App類型及特點(diǎn)常用的設(shè)置顏色的方法有以下三種沿用啟動(dòng)圖標(biāo)顏色或企業(yè)Logo顏色為App主色調(diào)，如圖5.20、圖5.21所示。01App類型及特點(diǎn)常用的設(shè)置顏色的方法有以下三種借鑒競(jìng)品顏色，同品類產(chǎn)品的色調(diào)保持一致，如圖5.22、圖5.23所示。01App類型及特點(diǎn)常用的設(shè)置顏色的方法有以下三種多使用高級(jí)灰色，飽和度低的顏色，如圖5.24所示。iOS控件介紹及設(shè)計(jì)規(guī)范0202iOS控件介紹及設(shè)計(jì)規(guī)范iOS控件擺放規(guī)范在UI設(shè)計(jì)中，除了要設(shè)計(jì)界面，還要設(shè)計(jì)一套完整的控件。設(shè)計(jì)好的控件在App中擺放的位置也要遵循一定原則：按照用戶操作順序；按照信息擺放順序。1.按照用戶操作順序用戶通過長期使用App,已經(jīng)養(yǎng)成了自己的操作習(xí)慣，所以在擺放控件時(shí)，要充分考慮用戶的操作順序習(xí)慣，否則將會(huì)增加用戶的學(xué)習(xí)成本。一般用戶在打開App時(shí)，首先會(huì)關(guān)注標(biāo)簽欄里的標(biāo)簽內(nèi)容，其次關(guān)注導(dǎo)航欄(標(biāo)題欄)里的導(dǎo)航內(nèi)容，再看內(nèi)容區(qū)里的內(nèi)容，彈出窗口信息及跳轉(zhuǎn)新頁面里的內(nèi)容。2.按照信息擺放順序按照信息擺放順序，主要是參考文章中目錄、章節(jié)的排列結(jié)構(gòu)，二級(jí)目錄另起一行，相對(duì)一級(jí)目錄空兩個(gè)字符的距離。在App中，標(biāo)簽欄與界面兩端沒有距離，而導(dǎo)航欄的內(nèi)容與界面兩端產(chǎn)生距離，而在分段選擇控件中與導(dǎo)航欄的內(nèi)容又產(chǎn)生距離，這與行文中換行空兩個(gè)字符道理相似。示例如圖5.26、圖5.27所示。02iOS控件介紹及設(shè)計(jì)規(guī)范02iOS控件介紹及設(shè)計(jì)規(guī)范iOS控件及規(guī)范UI設(shè)計(jì)師需要對(duì)界面系統(tǒng)的規(guī)范有足夠的認(rèn)識(shí)，才能進(jìn)一步實(shí)現(xiàn)個(gè)性化的設(shè)計(jì)，因此要求UI設(shè)計(jì)師必須熟練掌握控件的用法及規(guī)范，控件規(guī)范以iPhone6的分辨率為例進(jìn)行講解。iPhone常用圖標(biāo)規(guī)范在Phone中使用的圖標(biāo)大小有嚴(yán)格的規(guī)范，如表5.9所示。02iOS控件介紹及設(shè)計(jì)規(guī)范iPhone常用字體規(guī)范在iPhone中使用的字體有嚴(yán)格的規(guī)范，如表5.10所示。02iOS控件介紹及設(shè)計(jì)規(guī)范iPhone常用字體大小規(guī)范在iPhone中使用的字體大小有嚴(yán)格的規(guī)范，如表5.11所示，字體大小示意圖如5.42所示。02iOS控件介紹及設(shè)計(jì)規(guī)范如何表現(xiàn)文字間層級(jí)關(guān)系在移動(dòng)界面中，文字層級(jí)關(guān)系至關(guān)重要，常利用字體的大小、色彩、粗細(xì)等進(jìn)行表示。其參數(shù)如表5.12所示，效果如圖5.43所示。02iOS控件介紹及設(shè)計(jì)規(guī)范搜索框在iPhone中的通訊錄內(nèi)會(huì)出現(xiàn)搜索框，一般在向下翻頁時(shí)會(huì)自動(dòng)出現(xiàn)，如圖5.44所示。02iOS控件介紹及設(shè)計(jì)規(guī)范分段選擇控件在一個(gè)界面中設(shè)置多種選項(xiàng)時(shí)可以使用分段選擇控件，分段選擇控件長度一般沒有具體要求，高度一般為58px,如圖5.45所示。使用分段選擇控件的優(yōu)點(diǎn)是可以減少頁面生成數(shù)量。02iOS控件介紹及設(shè)計(jì)規(guī)范鍵盤鍵盤一般是iPhone的重要輸入控件，鍵盤的高度為432px,如圖5.46所示。常見界面布局0303常見界面布局1.宮格布局宮格布局是常見的一種布局方式，其優(yōu)點(diǎn)是對(duì)用戶操作引導(dǎo)性強(qiáng)，學(xué)習(xí)成本低；缺點(diǎn)是層級(jí)較深，用戶并不能快速了解具體功能。宮格布局示例及案例如圖5.47、圖5.48所示。03常見界面布局2.標(biāo)簽式布局標(biāo)簽式布局常見的有底標(biāo)簽式、上標(biāo)簽式、左標(biāo)簽式。由于用戶操作時(shí)不方便，右標(biāo)簽式一般不用。標(biāo)簽式布局的優(yōu)點(diǎn)是界面層級(jí)較少，缺點(diǎn)是界面或功能主次不明確。標(biāo)簽式布局示例及案例如圖5.49、圖5.50所示。03常見界面布局3.橫排布局橫排布局是最近出現(xiàn)的一種布局方式，其優(yōu)點(diǎn)是界面布局方式大氣，耳目一新；缺點(diǎn)是頁面中顯示的數(shù)據(jù)數(shù)量少，另外還需要用戶主動(dòng)探索其他內(nèi)容。橫排布局示例及案例如圖5.51、圖5.52所示。03常見界面布局4.卡片式布局卡片式布局也是最近出現(xiàn)的一種布局方式，其優(yōu)點(diǎn)是界面操作簡(jiǎn)單，用戶易聚焦內(nèi)容，常用作一次性瀏覽；缺點(diǎn)是頁面中顯示的內(nèi)容少，滑動(dòng)操作易疲勞?？ㄆ讲季质纠鞍咐鐖D5.53、圖5.54所示。03常見界面布局5.圖表式布局圖表式布局常用于數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)顯示或表示行動(dòng)過程，其優(yōu)點(diǎn)是表達(dá)內(nèi)容形象生動(dòng)、主次分明，易突出核心內(nèi)容；缺點(diǎn)是頁面中顯示的內(nèi)容較少，頁面控件利用率不高。圖表式布局示例及案例如圖5.55、圖5.56所示。03常見界面布局6.不規(guī)則式布局不規(guī)則式布局是常用的一種布局方式，通過該布局方式引起用戶的好奇心，增加產(chǎn)品的關(guān)注度。其優(yōu)點(diǎn)是效果表現(xiàn)獨(dú)特、表現(xiàn)個(gè)性、引起用戶好奇心；缺點(diǎn)是擴(kuò)展性差。不規(guī)則式布局示例及案例如圖5.57、圖5.58所示。03常見界面布局7.側(cè)滑式布局側(cè)滑式布局的優(yōu)點(diǎn)是增加主界面顯示區(qū)域，擴(kuò)展性高；缺點(diǎn)是用戶前期使用時(shí)學(xué)習(xí)成本較高。側(cè)滑式布局示例及案例如圖5.59、圖5.60所示。03常見界面布局8.列表式布局列表式布局是使用率非常高的布局之一，其優(yōu)點(diǎn)是擴(kuò)展性高，界面可以根據(jù)內(nèi)容不斷增長；缺點(diǎn)是表現(xiàn)形式單一，界面不活潑。列表式布局示列及案例如圖5.61、圖5.62所示。App界面設(shè)計(jì)實(shí)戰(zhàn)0404App界面設(shè)計(jì)實(shí)戰(zhàn)音樂類App屬于前面分析的工具型App。工具型App界面設(shè)計(jì)時(shí)主要突出操作方式，以及用戶所關(guān)心的信息。針對(duì)音樂類App播放界面，用戶所關(guān)心的是如何打開或關(guān)閉音樂的操作方式和音樂播放進(jìn)度、歌詞等信息顯示。完成效果如圖5.63所示。音樂App界面實(shí)戰(zhàn)04App界面設(shè)計(jì)實(shí)戰(zhàn)04App界面設(shè)計(jì)實(shí)戰(zhàn)(1)打開PhotoshopCC2018,創(chuàng)建文檔大小為750pxX1334px(參照iPhone6iOS11規(guī)范),分辨率設(shè)置為72ppi,顏色模式為RGB顏色。(2)創(chuàng)建狀態(tài)欄(40px)及其圖標(biāo)(28px,圖標(biāo)可以直接調(diào)用控件，也可以自己制作。(3)使用“文件”>“置入嵌入對(duì)象”命令，選擇背景圖片“bgjpg”,以“智能對(duì)象”形式在畫布中打開。(4)調(diào)整背景圖片大小至覆蓋整個(gè)畫布，然后設(shè)置“高斯模糊”

。(5)繪制圓形，大小為626px×626px,設(shè)置坐標(biāo)值為X:62,Y:290,同時(shí)與背景進(jìn)行水平居中對(duì)齊。音樂App界面實(shí)戰(zhàn)04App界面設(shè)計(jì)實(shí)戰(zhàn)(6)將備用的背景圖片再次在界面中打開，適當(dāng)調(diào)整大小后，保證背景圖片層在繪制的圓形層上面，按住“At”鍵，并將鼠標(biāo)指針移動(dòng)到兩層之間單擊，使用剪貼蒙版的方法將背景圖片在圓形中顯示。(7)選中圓形，添加圖層樣式中的描邊效果，顏色值為#FEF2F1,調(diào)整不透明度值為65%,大小值為12px。參數(shù)如圖5.69所示。(8)使用“視圖”>“新建參考線”命令，新建水平參考線80px,再創(chuàng)建一條水平參考線140px。音樂App界面實(shí)戰(zhàn)04App界面設(shè)計(jì)實(shí)戰(zhàn)(9)使用【文字工具