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

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

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

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

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

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

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

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