《UI設(shè)計(jì)》課件-UI設(shè)計(jì)-ios設(shè)計(jì)規(guī)范

UI設(shè)計(jì)IOS設(shè)計(jì)規(guī)范界面設(shè)計(jì)尺寸及欄高度邊距和間距內(nèi)容布局界面圖片設(shè)計(jì)比例建立統(tǒng)一風(fēng)格的圖標(biāo)APP版式設(shè)計(jì)規(guī)范界面文字設(shè)計(jì)規(guī)范設(shè)計(jì)適配1.什么是App？App是英文Application的簡(jiǎn)稱,由于iPhone智能手機(jī)的流行,

現(xiàn)在的APP多指智能手機(jī)的第三方應(yīng)用程序。2.三大平臺(tái)：IOSAndroidWindowsPhoneIOS是什么？IOS中的UI設(shè)計(jì)IOS圖標(biāo)進(jìn)化物理像素、邏輯像素、倍率屏幕都是由許多像素點(diǎn)組成，每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們看到的畫面。像我們的熟悉iphone6s屏幕就是由750行、1334列像素點(diǎn)組成的矩陣圖。設(shè)計(jì)師作圖所用的分辨率就是指物理像素，簡(jiǎn)而言之，物理像素=分辨率，單位px；邏輯像素又叫邏輯點(diǎn)，是控制屏幕內(nèi)容顯示多寡的一個(gè)單位，單位符號(hào)pt，程序員在開(kāi)發(fā)環(huán)節(jié)必須將設(shè)計(jì)師提供的物理像素轉(zhuǎn)換成邏輯像素，并通過(guò)邏輯像素來(lái)控制頁(yè)面顯示哪些內(nèi)容。不同設(shè)備邏輯像素與物理像素的比例是不同的。每個(gè)設(shè)備物理像素固定不變，我們調(diào)節(jié)顯示器的分變率其實(shí)調(diào)節(jié)的是邏輯像素。物理像素在硬件層面構(gòu)成了液晶屏幕，邏輯像素在軟件層面構(gòu)成了畫面圖像倍率，1個(gè)邏輯像素對(duì)應(yīng)1個(gè)物理像素，1pt=1px，倍率1x，1個(gè)邏輯像素對(duì)應(yīng)1.5個(gè)物理素，1pt=1.5px，倍率1.5x，1個(gè)邏輯像素對(duì)應(yīng)2個(gè)物理像素，1pt=2px，倍率2x，1個(gè)邏輯像素對(duì)應(yīng)3個(gè)物理像素，1pt=3px，倍率3x，倍率=物理像素/邏輯像素。由于開(kāi)發(fā)工具不同，邏輯像素在ios,android名稱不同，ios是pt，android是dppx：pixel，像素，電子屏幕上組成一幅圖畫或照片的最基本單元pt:point，點(diǎn)，印刷行業(yè)常用單位，等于1/72英寸當(dāng)photoshop中新建畫布的分辨率為72ppi(即72dpi時(shí))，1pt=1px；當(dāng)新建畫布分辨率為72*2=144ppi時(shí)，1pt=2px界面設(shè)計(jì)尺寸及欄高度界面尺寸欄及高度邊距和間距（1）全局邊距全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范，以達(dá)到頁(yè)面整體視覺(jué)效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會(huì)使界面內(nèi)容過(guò)于擁擠，給用戶的瀏覽帶來(lái)視覺(jué)負(fù)擔(dān)。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距。不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身，其視覺(jué)流在向下瀏覽時(shí)因?yàn)闆](méi)有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長(zhǎng)時(shí)間。（2）卡片間距在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見(jiàn)的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來(lái)界定，通常最小不低于16px，過(guò)小的間距會(huì)造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過(guò)大，過(guò)大的間距會(huì)使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。以iOS（750*1334px）為例，設(shè)置頁(yè)面不需要承載太多的信息，因此采用了較大的70px作為卡片間距，有利于減輕用戶的閱讀負(fù)擔(dān)，而通知中心承載了大量的信息，過(guò)大的間距會(huì)讓瀏覽變得不連貫和界面視覺(jué)松散，因此采用了較小的16px作為卡片的間距。（3）內(nèi)容間距在UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用，比如在右面這款輕芒閱讀APP的主界面中，每一個(gè)應(yīng)用名稱都遠(yuǎn)離其他圖標(biāo)，與對(duì)應(yīng)的圖標(biāo)距離較近，保持親密的關(guān)系，也讓用戶的瀏覽變得更直觀，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯(cuò)亂的感覺(jué)。內(nèi)容布局（1）列表式布局

在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。內(nèi)容布局（2）卡片式布局形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富。雙欄卡片的布局形式，比較常見(jiàn)于以圖片信息為主導(dǎo)的App。例如一些商城的商品陳列頁(yè)面。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開(kāi)左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。界面圖片設(shè)計(jì)比例控件規(guī)范iOS界面的控件包含導(dǎo)航欄、搜索欄、篩選框、標(biāo)簽欄、工具欄、開(kāi)關(guān)、提示框、彈出層以及控件配色和手勢(shì)交互等，這些控件都有固定的設(shè)計(jì)規(guī)范。導(dǎo)航欄搜索欄篩選欄標(biāo)簽欄開(kāi)關(guān)工具欄提示欄彈框控件配色建立統(tǒng)一風(fēng)格的圖標(biāo)界面文字設(shè)計(jì)規(guī)范字體的顏色設(shè)置我們一般很少用純黑色，一般用深灰色和淺灰色、細(xì)體和粗體（注意要用字體本身的字重，不能用PS的加粗功能）來(lái)區(qū)分重要信息和次要信息，進(jìn)行信息層級(jí)的劃分。字體iPhone上的字體英文為HelveticNeue。中文Mac下是黑體，Win下可以用華文黑體，或者方正黑體簡(jiǎn)體，或者蘋方。字體的大小沒(méi)有嚴(yán)格的標(biāo)準(zhǔn)，一般標(biāo)題為32-36px，正文內(nèi)容為24-30px，輔助文字為20px或18px。（一種簡(jiǎn)單方法是找個(gè)不錯(cuò)的APP，截圖后放進(jìn)PS參考里面的字體大?。閕os而設(shè)計(jì)，ios新特性遵從：UI能夠更好地幫助用戶理解內(nèi)容并與之互動(dòng)，但卻不會(huì)分散用戶對(duì)內(nèi)容本身的注意力。清晰：各種大小的文字應(yīng)易讀，圖標(biāo)應(yīng)該醒目，去除多余的修飾，突出重點(diǎn)，很好的突出設(shè)計(jì)理念。深度：視覺(jué)的層次和生動(dòng)的交互動(dòng)作會(huì)賦予UI新的活力，不但幫助用戶更好理解新UI的操作并讓用戶在使用的過(guò)程中感到驚喜。首先，去除了UI元素讓應(yīng)用的核心功能呈現(xiàn)的更加直接并強(qiáng)調(diào)其相關(guān)性。其次，直接使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI，這樣能給用戶統(tǒng)一的視覺(jué)感受。最后，保證你設(shè)計(jì)的UI可以適應(yīng)各種設(shè)備和不同的操作模式，這樣用戶可以在不同的場(chǎng)景下舒適地享用你的應(yīng)用。以內(nèi)容為核心充分利用屏幕盡量減少視覺(jué)修飾和擬物化設(shè)計(jì)的使用嘗試使用半透明底板保證清晰度使用大量留白讓顏色簡(jiǎn)化UI通過(guò)使用系統(tǒng)字體確保易讀性使用無(wú)邊框的按鈕用深度來(lái)體現(xiàn)層次半透明背景浮層來(lái)區(qū)分和其余部分的內(nèi)容以不同的層級(jí)展示使用無(wú)邊框的按鈕適應(yīng)性布局iPhone的顯示環(huán)境可根據(jù)不同的設(shè)備和不同的握持方向而改變。標(biāo)準(zhǔn)手勢(shì)可交互元素吸引用戶點(diǎn)擊為了暗示交互性，設(shè)計(jì)時(shí)會(huì)使用很多的線索，包括顏色、位置、上下文、表意明確的圖標(biāo)和標(biāo)簽等。輸入信息的方式要簡(jiǎn)單讓用戶更容易的進(jìn)行選擇。1.所有部件的尺寸必須是雙數(shù)；2.字號(hào)規(guī)范大：32/34/36正文：30/28/24/22輔助提示：18/20；3.普通屏幕下，最小觸控點(diǎn)為44*44；4.常用灰色背景色#eeeeee;1像素線常用色值為#e8e8e8；常用灰色文字：#333如果背景為白色，1像素線也可為#eeeeee；5.除了廣告圖片，其他部件最好用形狀工具繪制；6.設(shè)計(jì)時(shí)，可點(diǎn)擊的部件盡量和四周邊框保持一定距離（一般控制左右20-30px的空間）；7.設(shè)計(jì)時(shí)，要保持一個(gè)使用者而非設(shè)計(jì)者的思想。因?yàn)槭謾C(jī)的可顯示范圍小，所以布局的時(shí)候要考慮邏輯性，比如什么時(shí)候需要標(biāo)簽欄，什么頁(yè)面需要標(biāo)簽按鈕，都需要好好考慮在使用中的意義；8.模塊常用間距20-30px。Android設(shè)計(jì)規(guī)范Android設(shè)計(jì)尺寸及單位控件設(shè)計(jì)規(guī)范dp*ppi/160=pxAndroid的設(shè)計(jì)尺寸及單位在設(shè)計(jì)界面時(shí)，經(jīng)常會(huì)借助柵格系統(tǒng)進(jìn)行輔助設(shè)計(jì)，柵格的最小單位為8dp。dp：安卓專用長(zhǎng)度單位。以720x1280px(320dpi)為例，1dp=2px以1080x1920px(480dpi)為例，1dp=3pxsp：安卓專用字體單位。以720x1280px(320dpi)為例，1dp=2px以1080x1920px(480dpi)為例，1dp=3px說(shuō)明：安卓機(jī)型多，目前主流機(jī)型就是這兩種尺寸?，F(xiàn)在設(shè)計(jì)稿一般采用1080×1920px，方便適配。Android的控件設(shè)計(jì)規(guī)范按鈕懸浮型按鈕色塊型按鈕圖形化按鈕Android的控件設(shè)計(jì)規(guī)范卡片對(duì)話框Android的對(duì)話框中內(nèi)容由標(biāo)題、正文和操作按鈕組成，對(duì)話框四周的留白通常為24dp。Android的對(duì)話框分為有操作項(xiàng)對(duì)話框、不帶操作項(xiàng)對(duì)話框和全屏對(duì)話框。①點(diǎn)擊對(duì)話框的區(qū)域，不會(huì)關(guān)閉對(duì)話框。②取消的操作放在對(duì)話框的左邊。③操作項(xiàng)的文案要具體，不能只寫“是”和“否”。④完成選項(xiàng)操作后，需要確定后才會(huì)提交。有操作項(xiàng)對(duì)話框①點(diǎn)擊對(duì)話框中的列表項(xiàng)會(huì)直接發(fā)出操作，并關(guān)閉對(duì)話框。②點(diǎn)擊對(duì)話框外的區(qū)域?qū)?huì)關(guān)閉對(duì)話框。無(wú)操作項(xiàng)對(duì)話框全屏對(duì)話框右上角的操作項(xiàng)一般是保存、發(fā)送、添加、分享、更新和創(chuàng)建之類的操作，這些操作可以是可點(diǎn)狀態(tài)，也可以是不可點(diǎn)擊狀態(tài)，而左上角一般是取消或返回操作。列表Android列表的主操作在左側(cè)，輔助操作在右側(cè)（輔助操作可以是勾選、開(kāi)關(guān)和展開(kāi)等另外，同一列表的操作手勢(shì)是一致的。分割線Android的分割線在設(shè)計(jì)時(shí)需要注意以下4點(diǎn)。①列表左邊如果有頭像或圖標(biāo)元素，其中列表與列表的分割線需要與文字對(duì)齊，右邊留白。②列表在左邊沒(méi)有元素時(shí)，可以將分割線拉通，使用左右無(wú)縫隙的分割線。③分割線的顏色不要太深，粗細(xì)不要超出一個(gè)單位（1dp或1px），否則容易導(dǎo)致割裂感太強(qiáng)。④在使用通欄分割線進(jìn)行分割時(shí)，內(nèi)容層級(jí)要高于左邊有留白分割線分割的內(nèi)容。菜單在點(diǎn)擊Android的菜單控件時(shí)，菜單控件會(huì)在當(dāng)前頁(yè)面中展開(kāi)，其中當(dāng)前選定中項(xiàng)的背景顏色會(huì)顯示為灰色。如果可以選擇的項(xiàng)目比較多，菜單項(xiàng)會(huì)以滾動(dòng)條的方式進(jìn)行顯示，用戶可以通過(guò)上下滑動(dòng)的方式找到合適的選項(xiàng)。加載方式在Android的加載控件中有進(jìn)度條加載和環(huán)形加載兩種方式。其中進(jìn)度條加載分為已知加載、未知加載、緩沖加載和未知加載查找4種加載方式，這些加載進(jìn)度條只出現(xiàn)在卡片的邊緣加載進(jìn)度條只出現(xiàn)在卡片邊緣已知加載進(jìn)度條：這種加載方式是從左往右進(jìn)行加載，加載的進(jìn)度條會(huì)填充顏色，直到滿格加載完為止未知加載進(jìn)度條：這種加載方式表現(xiàn)為有色線條從左往右循環(huán)位移，直到加載完畢進(jìn)度條消失為止緩沖加載進(jìn)度條：這種加載方式的進(jìn)度條首先會(huì)從左往右進(jìn)行預(yù)加載，同時(shí)進(jìn)度條會(huì)顯示為藍(lán)灰色的點(diǎn)狀效果，當(dāng)完整地讀取數(shù)據(jù)后進(jìn)度條才會(huì)進(jìn)行顏色填充未知加載查找進(jìn)度條：這種加載方式出現(xiàn)的頻率比較低，其加載形式分為兩個(gè)動(dòng)畫組合，首先有色線條會(huì)從右往左循環(huán)位移表示查找數(shù)據(jù)，查找到數(shù)據(jù)后再進(jìn)行顏色加載，同時(shí)顏色會(huì)從左往右進(jìn)行填充環(huán)形加載不僅可以在頁(yè)面信息加載中使用，還可以在懸浮按鈕中使用，例如點(diǎn)擊下載的按鈕進(jìn)度條出現(xiàn)在按鈕邊緣，環(huán)形加載也分為已知加載和未知加載兩種，其中已知加載的效果和進(jìn)度條的已知加載效果一樣，都會(huì)進(jìn)行顏色加載填充，而未知加載的圓弧不會(huì)閉合。進(jìn)度條出現(xiàn)在懸浮按鈕上輸入框Android的輸入框通常用橫線來(lái)設(shè)計(jì)，粗細(xì)為2dp。激活后的輸入框的橫線顏色會(huì)高亮顯示，沒(méi)有激活的輸入框橫線會(huì)顯示為灰色。另外，不可點(diǎn)擊的輸入框文字及橫線都會(huì)顯示為灰色效果。選擇框在填寫信息的時(shí)候會(huì)用到選擇框，例如單選、多選和開(kāi)關(guān)等，其中單選的樣式通常為圓形點(diǎn)，多選為方形加勾選，開(kāi)關(guān)為左關(guān)右開(kāi)，從視覺(jué)上來(lái)看，有顏色的狀態(tài)表示選中狀態(tài)，灰色的狀態(tài)表示未選定或關(guān)閉狀態(tài)。在信息流的設(shè)計(jì)中，左右的間距會(huì)保持一致，通常設(shè)定為32px，從而保證有足夠的留白。信息流中的文本、圖片和頭像都會(huì)依據(jù)間距進(jìn)行左右對(duì)齊，以此來(lái)保證頁(yè)面的規(guī)則性。Android英文字體：RobotoAndroid中文字體：思源黑體在界面中經(jīng)常會(huì)出現(xiàn)單行列表的樣式，這種樣式的高度為144px，列表中的文字字號(hào)大小為44px。其中列表被點(diǎn)擊或選中的效果可以統(tǒng)一設(shè)置為品牌色的色值，而透明度可以設(shè)置為10%，這樣的設(shè)計(jì)會(huì)讓品牌印象貫穿在整個(gè)頁(yè)面中，更容易讓用戶記住產(chǎn)品的特點(diǎn)。常用字體規(guī)范字體設(shè)計(jì)規(guī)范字體設(shè)計(jì)規(guī)范在同一個(gè)App或在同一個(gè)設(shè)計(jì)作品中，用的字體最好也不要超過(guò)3種。一般來(lái)說(shuō)，在每個(gè)項(xiàng)目設(shè)計(jì)中使用一種或兩種字體就夠了，重點(diǎn)文案可以通過(guò)調(diào)整字體大小和顏色來(lái)進(jìn)行強(qiáng)調(diào)。字與背景要分明字體與氣氛要匹配常用字體類型字體常用顏色界面中的文字分為3個(gè)層級(jí)，即主文、副文和提示文案等。在白色背景下，字體的顏色層次其實(shí)就是灰色（#999999）、深灰色（#666666）和深黑色（#333333）在界面中還會(huì)經(jīng)常用到淺灰色（#eeeeee）的背景，這種背景下的分割線顏色可以采用顏色值為#e5e5e5或#cccccc的灰色，一個(gè)淺一些，一個(gè)深一些。建立設(shè)計(jì)規(guī)范色彩控件規(guī)范按鈕控件規(guī)范分割線規(guī)范頭像規(guī)范提示框規(guī)范文字規(guī)范間距規(guī)范圖標(biāo)規(guī)范色彩控件規(guī)范制定主要色彩按鈕控件規(guī)范在移動(dòng)端設(shè)計(jì)中，按鈕有3種狀態(tài)，Normal（常態(tài)）、Pressed（點(diǎn)擊）狀態(tài)和Disable（不可用）狀態(tài)。在通常情況下，按鈕的點(diǎn)擊效果是顏色