久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

超全面的UI設(shè)計(jì)規(guī)范整理匯總(包含iPhone X適配)

 Lorneuuvam6gjf 2018-12-19

耗時(shí)7天,,查資料碼字,為大家整理了超全面的UI設(shè)計(jì)規(guī)范,,相信會(huì)對(duì)大家有所幫助,。(公眾號(hào)《UI充能站》出品 搜索i-lifeway進(jìn)站)

Image title



寫(xiě)在前面



很多新人在開(kāi)始做移動(dòng)端UI設(shè)計(jì)的時(shí)候,往往對(duì)界面的一些尺寸規(guī)范不是十分清楚,,很多時(shí)候都是憑借自己的感覺(jué)和經(jīng)驗(yàn)去繪制界面,,心里并沒(méi)有一個(gè)清晰的概念,導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意,。本文整理匯總了一些界面設(shè)計(jì)(iOS系統(tǒng))中常用的一些尺寸規(guī)范和方法,,如控件間距、適配,、標(biāo)注,、切圖等,設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守,,但對(duì)這些規(guī)范應(yīng)有所了解,,并融會(huì)貫通。



目錄



01.界面設(shè)計(jì)尺寸及欄高度

02.邊距和間距

03.內(nèi)容布局

04.界面圖片設(shè)計(jì)比例

05.建立統(tǒng)一風(fēng)格的圖標(biāo)

06.APP版式設(shè)計(jì)規(guī)范

07.界面文字設(shè)計(jì)規(guī)范

08.設(shè)計(jì)適配

09.切圖規(guī)范

10.設(shè)計(jì)稿標(biāo)注




正文



01.界面設(shè)計(jì)尺寸及欄高度



目前主流的iOS設(shè)備主要有iPhone SE(4英寸),、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸),、iPhone X(5.8英寸),,它們都采用了Retina視網(wǎng)膜屏幕,,其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,,無(wú)論是欄高度還是應(yīng)用圖標(biāo),,設(shè)計(jì)師提供給開(kāi)發(fā)人員的切片大小,前者始終是后者的1.5倍,,并分別以@3x和@2x在文件名結(jié)尾命名,,程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。


Image title

Image title



通過(guò)上面的講解和圖示我們了解了iPhone不同設(shè)備的物理尺寸,,那么他們的像素分辨率又是多少呢,?也就是說(shuō)我們用Photoshop做設(shè)計(jì)新建畫(huà)布應(yīng)該設(shè)置多大呢?另外,,iOS應(yīng)用中的欄,,包括狀態(tài)欄、導(dǎo)航欄,、標(biāo)簽欄,、工具欄等,它們的高度又分別是多少呢,?(注意:iOS嚴(yán)格規(guī)定了各個(gè)欄的高度,,這個(gè)是必須遵守的)通過(guò)下面的表格和圖示來(lái)為你解答上面的問(wèn)題。


Image title


注意:在進(jìn)行iphone x設(shè)計(jì)的時(shí)候我們依然可以采用熟悉的iphone 7的設(shè)計(jì)尺寸作為模板,,只是高度增加了290px,,設(shè)計(jì)尺寸為750*1624(@2x)。注意狀態(tài)欄的高度由原來(lái)的40px變成了88px,,另外底部要預(yù)留68px的主頁(yè)指示器的位置,。



Image title

Image title

Image title




02.邊距和間距



在移動(dòng)端頁(yè)面的設(shè)計(jì)中,頁(yè)面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的,,一個(gè)頁(yè)面是否美觀,、簡(jiǎn)潔、是否通透和邊距間距的設(shè)計(jì)規(guī)范緊密相連,,所以說(shuō)我們有必要對(duì)它們進(jìn)行了解,。



全局邊距



全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離,整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范,,以達(dá)到頁(yè)面整體視覺(jué)效果的統(tǒng)一,。全局邊距的設(shè)置可以更好的引導(dǎo)用戶(hù)豎向向下閱讀。

Image title



在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距,,讓邊距成為界面的一種設(shè)計(jì)語(yǔ)言,,常用的全局邊距有32px、30px,、24px,、20px等等,,當(dāng)然除了這些還有更大或者更小的邊距,但上面說(shuō)到的這些是最常用的,,而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù),。


以iOS原生態(tài)頁(yè)面為例,“設(shè)置”頁(yè)面和“通用”頁(yè)面都是使用的30px的邊距,。

Image title



再以微信和支付寶為例,,他們的邊距分別是20px和24px。


Image title



通常左右邊距最小為20px,,這樣的距離可以展示更多的內(nèi)容,,不建議比20還小,否則就會(huì)使界面內(nèi)容過(guò)于擁擠,,給用戶(hù)的瀏覽帶來(lái)視覺(jué)負(fù)擔(dān),。30px是非常舒服的距離,是絕大多數(shù)應(yīng)用的首選邊距,。



還有一種是不留邊距,,通常被應(yīng)用在卡片式布局中圖片通欄顯示,比如站酷APP(當(dāng)然站酷APP也進(jìn)行了改版,,首頁(yè)已經(jīng)采用了不通欄的卡片式設(shè)計(jì)),。這種圖片通欄顯示的設(shè)置方式,更容易讓用戶(hù)將注意力集中到每個(gè)圖文的內(nèi)容本身,,其視覺(jué)流在向下瀏覽時(shí)因?yàn)闆](méi)有留白的引導(dǎo)被圖片直接割裂,,造成在圖片上停留更長(zhǎng)時(shí)間。

Image title



卡片間距



在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見(jiàn)的布局方式,,至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來(lái)界定,,通常最小不低于16px,過(guò)小的間距會(huì)造成用戶(hù)的緊張情緒,,使用最多的間距是20px,、24px、30px,、40px,,當(dāng)然間距也不宜過(guò)大,過(guò)大的間距會(huì)使界面變得松散,,間距的顏色設(shè)置可以與分割線(xiàn)一致,,也可以更淺一些。



以iOS(750*1334px)為例,,設(shè)置頁(yè)面不需要承載太多的信息,,因此采用了較大的70px作為卡片間距,有利于減輕用戶(hù)的閱讀負(fù)擔(dān),,而通知中心承載了大量的信息,,過(guò)大的間距會(huì)讓瀏覽變得不連貫和界面視覺(jué)松散,,因此采用了較小的16px作為卡片的間距。

Image title



下面來(lái)看一下微信的卡片間距設(shè)置的是多少,,以及顏色值。

Image title


注:卡片間距和顏色值是直接截圖測(cè)量和吸取的,,可能不十分準(zhǔn)確



繼續(xù)舉例,,下面的兩張截圖分別是巨劃算(卡片間距20px)和拼多多(卡片間距16px)的首頁(yè)截圖,這種電商類(lèi)的APP因?yàn)樾枰休d大量的信息,,所以一般間距設(shè)置的都比較小,。

Image title



總結(jié):卡片間距的設(shè)置是靈活多變的,一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置,,平時(shí)也可以多截圖測(cè)量一下各類(lèi)APP的卡片間距都是怎么設(shè)置的,,看的多了并融會(huì)貫通,卡片間距設(shè)置自然會(huì)更加合理,,更加得心應(yīng)手,。



內(nèi)容間距



一款A(yù)PP除了各種欄(狀態(tài)欄、導(dǎo)航欄,、標(biāo)簽欄,、工具欄)和控件icon就是內(nèi)容了,內(nèi)容的布局形式多種多樣,,這里不去探討內(nèi)容具體應(yīng)該如何去布局,,我們來(lái)說(shuō)一說(shuō)內(nèi)容的間距設(shè)置問(wèn)題。



先來(lái)介紹一下格式塔原則中的一個(gè)重要的原則就是鄰近性,,格式塔鄰近性原則認(rèn)為:?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起,,,互相靠近的元素看起來(lái)屬于一組,,而那些距離較遠(yuǎn)的則自動(dòng)劃分組外,,距離近的關(guān)系緊密。來(lái)看下圖,,左圖中的圓在水平方向比垂直距離近,,那么,我們看到了4排圓點(diǎn),,而右圖則看成4列,。

Image title



在UI設(shè)計(jì)中內(nèi)容布局時(shí),一定要重視鄰近性原則的運(yùn)用,,比如在下面這款輕芒閱讀APP的主界面中,,每一個(gè)應(yīng)用名稱(chēng)都遠(yuǎn)離其他圖標(biāo),與對(duì)應(yīng)的圖標(biāo)距離較近,,保持親密的關(guān)系,,也讓用戶(hù)的瀏覽變得更直觀,,如果應(yīng)用名稱(chēng)與上下圖標(biāo)距離相同,就分不出它是屬于上面還是下面,,從而讓用戶(hù)產(chǎn)生錯(cuò)亂的感覺(jué),。

Image title



再來(lái)看一個(gè)案例,日日煮APP,,上面圖片與文字較近,,下面圖片與文字較遠(yuǎn),所以我們清晰的知道文字是屬于上面的圖片的,。

Image title



03.內(nèi)容布局



在APP的設(shè)計(jì)中內(nèi)容的布局形式多種多樣,,這里介紹最常用的兩種布局形式,列表式布局和卡片式布局,。



列表式布局



列表式布局方式非常普遍,,隨便打開(kāi)一個(gè)APP,基本都存在這種布局方式,,其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息,,用戶(hù)通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式,。



以我們最常用的微信和QQ為例,,其“信息”頁(yè)面都是采用的列表式布局,在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px,,最大的高度要視內(nèi)容的多少而定,。

Image title



繼續(xù)舉例,自如(列表高度110px)和唯品會(huì)(列表高度106px)的列表式布局,。

Image title




卡片式布局



形式非常靈活,。其特點(diǎn)在于,每張卡片的內(nèi)容和形式都可以相互獨(dú)立,,互不干擾,,所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的,,其信息量可以相對(duì)列表更加豐富,。



在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的,而卡片之間的間距顏色一般是淺灰色,,當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣,,有些是淺灰色偏藍(lán)等。

Image title



雙欄卡片的布局形式,,比較常見(jiàn)于以圖片信息為主導(dǎo)的App,。例如一些商城的商品陳列頁(yè)面。這種形式與卡片式類(lèi)似,但它能在一屏里顯示更多的內(nèi)容,,至少4張卡片,。同時(shí),由于分開(kāi)左右兩欄的顯示,,用戶(hù)可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容,。

Image title




04.界面圖片設(shè)計(jì)比例



在UI設(shè)計(jì)中,對(duì)于圖片的尺寸和比例沒(méi)有嚴(yán)格的規(guī)范,,設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺(jué)設(shè)置一個(gè)看起來(lái)不錯(cuò)的尺寸,,但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸,,可以獲得最優(yōu)的方案,常見(jiàn)的圖片尺寸有16:9,、4:3,、3:2、1:1和1:0.618(黃金比例)等,。



這些比例不無(wú)根據(jù),,它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究,,發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形,,4:3 是勾三股四弦五,在攝影中非常常見(jiàn)……,。

Image title




05.建立統(tǒng)一風(fēng)格的圖標(biāo)



在應(yīng)用界面的設(shè)計(jì)中,,功能圖標(biāo)不是單獨(dú)的個(gè)體,通常是由許多不同的圖標(biāo)構(gòu)成整個(gè)系列,,它們貫穿于整個(gè)產(chǎn)品應(yīng)用的所有頁(yè)面并向用戶(hù)傳遞信息,。



一套APP圖標(biāo)應(yīng)該具有相同的風(fēng)格,包括造型規(guī)則,、圓角大小,,線(xiàn)框粗細(xì),圖形樣式和個(gè)性細(xì)節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范,。

Image title



通過(guò)分析以上三組圖標(biāo)可以得出:他們具有統(tǒng)一的色彩,,統(tǒng)一的圓角大小,統(tǒng)一的線(xiàn)框粗細(xì),,那綜合起來(lái)也就是具有統(tǒng)一的風(fēng)格,,給用戶(hù)高度統(tǒng)一的視覺(jué)體驗(yàn)。



06.APP版式設(shè)計(jì)規(guī)范



版式設(shè)計(jì)又叫做版面編輯,,即在有限的版面空間里,,將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進(jìn)行組合排列,。一個(gè)優(yōu)秀的排版要考慮到用戶(hù)的閱讀習(xí)慣和設(shè)計(jì)美感,,在UI設(shè)計(jì)中版面設(shè)計(jì)的原則有哪些呢?



對(duì)齊



對(duì)齊是貫穿版式設(shè)計(jì)的最基礎(chǔ),,最重要的原則之一,,它能建立起一種整齊劃一的外觀,帶給用戶(hù)有序一致的瀏覽體驗(yàn),。

Image title




對(duì)稱(chēng)



對(duì)稱(chēng)是宇宙間的設(shè)計(jì)哲學(xué),,是對(duì)立統(tǒng)一規(guī)律的本質(zhì)屬性,呈現(xiàn)出一種和諧自然的美,,在應(yīng)用界面的設(shè)計(jì)中,,引導(dǎo)頁(yè)設(shè)計(jì)、注冊(cè)登錄輸入框和按鈕等無(wú)一不是對(duì)稱(chēng)的設(shè)計(jì),。

Image title




分組



物以類(lèi)聚,,人以群分。分組是將同類(lèi)別的信息組合在一起,,直觀的呈現(xiàn)在用戶(hù)的面前,,這樣的設(shè)計(jì)能夠減少用戶(hù)的認(rèn)知負(fù)擔(dān),在移動(dòng)端界面的設(shè)計(jì)中最常見(jiàn)的分組方式就是卡片,,為用戶(hù)選擇提供專(zhuān)注而又明確的瀏覽體驗(yàn),。

Image title



07.界面文字設(shè)計(jì)規(guī)范



文字是APP中最核心的元素,是產(chǎn)品傳達(dá)給用戶(hù)的主要內(nèi)容,,所以說(shuō)文字在APP的設(shè)計(jì)中是非常重要的,,那么,文字的字體如何選擇,,字號(hào)如何設(shè)定,,是否加粗,顏色如何設(shè)置,?



在一款A(yù)PP中字號(hào)范圍一般在20-36之間(@2x),當(dāng)然iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì),,字號(hào)還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù),,上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào),。

Image title



關(guān)于字體:在iOS 9推出之前設(shè)計(jì)師普遍采用華文黑體、谷歌思源,、冬青等字體進(jìn)行設(shè)計(jì),,iOS 9推出了蘋(píng)果自己的字體——蘋(píng)方!自此之后蘋(píng)方字體被廣泛應(yīng)用于移動(dòng)端設(shè)計(jì)中,。



關(guān)于字體顏色和是否加粗:字體的顏色設(shè)置我們一般很少用純黑色,,一般用深灰色和淺灰色,、細(xì)體和粗體(注意要用字體本身的字重,不能用PS的加粗功能)來(lái)區(qū)分重要信息和次要信息,,進(jìn)行信息層級(jí)的劃分,。

Image title




08.設(shè)計(jì)適配



iOS主流設(shè)備的分辨率分別是640x1136px(@2x)(iPhone SE)、750 x1334px(@2x)(iPhone 6s/7/8),、1242x2208px(@3x)(iPhone 6s/7/8 Plus),、1125x2436px(@3x)/750x1624px(@2x)(iPhone X)。



在設(shè)計(jì)設(shè)計(jì)中設(shè)計(jì)師需要設(shè)計(jì)一套基準(zhǔn)設(shè)計(jì)圖來(lái)達(dá)到適配多個(gè)分辨率的目的,,我們可以選擇中間尺寸750 x1334px作為基準(zhǔn),,向下適配640x1136px,向上適配1242x2208px和750x1624px/1125x2436px,。

Image title



750x1334向下適配640x1136




由于750x1334px和640x1136px兩個(gè)尺寸的界面都是2倍的像素倍率,,因此它們的切片大小是相同的,即系統(tǒng)圖標(biāo),、文字和高度都無(wú)需適配,,需要適配的是寬度。



為了讓大家了解適配的原則,,我們以文字描述和圖示的方式進(jìn)行750x1334px到640x1136px的界面推導(dǎo)。



繪制一個(gè)750x1334px的設(shè)計(jì)圖,,這是最常見(jiàn)的首頁(yè)設(shè)計(jì)圖,,從上至下分別是狀態(tài)欄、導(dǎo)航欄,、首焦圖,、主要入口、分割,、列表,。

Image title



下面開(kāi)始進(jìn)行適配,上面提到了由于750x1334px到640x1136px都是2倍的像素倍率,,界面的圖標(biāo),、文字大小等都是相同的,所以我們不需要改變圖像大小,,只需將畫(huà)布大小改成 640x1136px即可,,然后再改變橫向元素的間距以達(dá)到適配的目的。



首先打開(kāi)750x1334px的設(shè)計(jì)稿,,執(zhí)行Command+Alt+C(改變畫(huà)布大小的快捷鍵),,鼠標(biāo)左鍵單擊“定位”的左上角的格子,設(shè)置寬高為640和1136,,點(diǎn)擊“確定”,。

Image title



改變畫(huà)布大小之后,設(shè)計(jì)稿的右邊和下邊都被裁切(上面左圖中半透明蒙版覆蓋區(qū)域),畫(huà)布縮小成640x1136px,。



上面左圖裁切到右圖適配完成,,做了如下調(diào)整。

1)導(dǎo)航欄右邊的圖標(biāo)向左移動(dòng)保持和原來(lái)的右邊距一致,,標(biāo)題居中,。

2)首焦圖高度除以1.17(750/640=1.17得到)后居中,寬度640px,。

3)主要入口右邊的圖標(biāo)向左移動(dòng)保持和原來(lái)的右邊距一致,,各圖標(biāo)的間距等寬。



750x1334向上適配1242x2208



由于750x1334px界面是2倍的像素倍率,,而1242x2208px是3倍的像素倍率,,也就是說(shuō)1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍,所以我們?cè)谶M(jìn)行適配的時(shí)候直接將界面的圖像大小變?yōu)樵瓉?lái)的1.5倍,,然后調(diào)整畫(huà)布大小為1242x2208px,,最后調(diào)整界面圖標(biāo)和元素的橫向間距的大小完成適配。



上面說(shuō)了整體思路,,下面我們來(lái)說(shuō)說(shuō)具體怎么適配,。



首先對(duì)750x1334px的畫(huà)布執(zhí)行Command+Alt+I命令(調(diào)整圖像大小),,單位設(shè)置為百分比,,寬高設(shè)置為150%,點(diǎn)擊“確定”,,調(diào)整之后的畫(huà)布大小為1125x2001px,。

Image title



緊接著對(duì)1.5倍之后的1125x2001px界面執(zhí)行Command+Alt+C(調(diào)整畫(huà)布大小),,鼠標(biāo)單擊“定位”左上角的格子,,調(diào)整寬高為1242和2208px,點(diǎn)擊“確定”,。

Image title



上面左圖拓展畫(huà)布到右圖完成適配做了如下調(diào)整,。

1)導(dǎo)航欄右邊的圖標(biāo)向右移動(dòng)保持和原來(lái)的右邊距一致,標(biāo)題居中,。

2)首焦圖的高度乘以1.65(1242/750=1.65得到)后居中,,寬度1242px。

3)主要入口右邊的圖標(biāo)向右移動(dòng)和原來(lái)的右邊距一致,,各圖標(biāo)的間距等寬,。

注:分割線(xiàn)仍是1px。



750x1334向上適配1125x2436px(@3x)



與蘋(píng)果之前發(fā)布的iOS設(shè)備相比,,iPhone X的像素分辨率發(fā)生了變化,,為1125x2436px(@3x),,在實(shí)際工作中為了方便向上和向下的適配,我們?nèi)匀豢梢赃x擇熟悉的iPhone 7(750x1334px)的尺寸作為模版進(jìn)行設(shè)計(jì),,只是高度增加了290px,;設(shè)計(jì)尺寸為:750x1624px(@2x)。設(shè)計(jì)完成之后將設(shè)計(jì)稿的圖像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的設(shè)計(jì)稿,。



在適配的時(shí)候需要注意,,狀態(tài)欄由之前的40px增加到88px,標(biāo)簽底部預(yù)留68px用于放置主頁(yè)指示器,,如下圖所示,。

Image title



關(guān)于主頁(yè)指示器的適配涉及到兩種情況:底部出現(xiàn)標(biāo)簽欄、工具欄等操作設(shè)計(jì)時(shí),,需要將底色下延68px并填充原有顏色,,這樣的處理可以讓底部設(shè)計(jì)更佳簡(jiǎn)潔舒適,沒(méi)有功能操作時(shí),,頁(yè)面底部不需要填充顏色,,只需蓋住主頁(yè)指示器即可。

Image title



對(duì)于大多數(shù)采用瀑布流的頁(yè)面來(lái)說(shuō),,僅僅是屏幕高度上的變化,,可以無(wú)視。但對(duì)于如:新手引導(dǎo)頁(yè),、音樂(lè)播放器等需要單屏顯示的界面就需要重新布局,。

Image title



09.切圖規(guī)范



當(dāng)界面設(shè)計(jì)定稿之后,設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開(kāi)發(fā)工程師,,通常我們只需要對(duì)icon進(jìn)行切圖即可,文字,、線(xiàn)條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的,,例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小,、背景色值,、不透明度即可,開(kāi)發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果,。

Image title




輸出切片



先將設(shè)計(jì)稿中的圖標(biāo)重新排列在一張新的畫(huà)布中,,保證同樣尺寸的圖標(biāo)間距相同,這樣做的好處是為圖標(biāo)建立一個(gè)控件庫(kù),,有利于圖標(biāo)的整理,。



給每一個(gè)圖標(biāo)建立好參考線(xiàn)之后,用PS自帶的切片功能,,沿著建立好的每個(gè)圖標(biāo)的參考線(xiàn)畫(huà)框即可,,注意最后要輸出PNG格式的切片(PNG格式擁有更多的顏色和細(xì)節(jié)并且支持透明),。



在具體操作時(shí)首先要將畫(huà)布背景色去掉,讓畫(huà)布變成透明,,做好切片后執(zhí)行“文件-存儲(chǔ)為Web所用格式,,在對(duì)話(huà)框中選擇PNG格式,點(diǎn)擊“存儲(chǔ)”即可,。

Image title


注:圖中標(biāo)簽欄圖標(biāo)的底色塊是為了保證統(tǒng)一的切片尺寸,,可以根據(jù)色塊建立參考線(xiàn),具體切圖時(shí)要將色塊去掉,。



切片命名



切片命名的通用規(guī)范是,,界面_功能_狀態(tài).png。名稱(chēng)應(yīng)使用英文命名,,不要使用數(shù)字或者符號(hào)作為開(kāi)頭,,使用下劃線(xiàn)進(jìn)行連接,例如一個(gè)首頁(yè)處于正常狀態(tài)下的按鈕命名是 [email protected],。其中界面首頁(yè)是home,、空間按鈕是btn、狀態(tài)正常是normal,。為了命名的正確性,,設(shè)計(jì)師需要先和合作的開(kāi)發(fā)工程師進(jìn)行溝通確認(rèn)。



10.設(shè)計(jì)稿標(biāo)注



當(dāng)界面設(shè)計(jì)定稿之后,,設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開(kāi)發(fā)工程師在還原界面時(shí)進(jìn)行參考,。借助一些專(zhuān)業(yè)的標(biāo)注工具有利于我們提高工作效率,常用的標(biāo)注工具有Mark Man或PX Cook,。



在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小,、粗細(xì)、顏色,、不透明度,;界面的背景顏色、不透明度,;各個(gè)圖標(biāo),、列表、文字之間的間距,。

Image title


界面標(biāo)注的作用是給開(kāi)發(fā)工程師提供參考,,因此在標(biāo)注之前需要和開(kāi)發(fā)工程師進(jìn)行溝通,了解他們的工作方式,,標(biāo)注完成之后宣講你的注意事項(xiàng),,以更快捷高效的完成工作,并且最大限度的完成視覺(jué)高的還原,。



總結(jié)



本文整理匯總了包括界面尺寸,、控件間距,、版式設(shè)計(jì)規(guī)范、文字設(shè)計(jì)規(guī)范,、設(shè)計(jì)適配,、標(biāo)注、切圖等等一些列的移動(dòng)端UI設(shè)計(jì)規(guī)范,,在此期間查閱了大量的資料,,共耗時(shí)一周完成本文的編寫(xiě),希望為剛剛從事UI設(shè)計(jì)的設(shè)計(jì)師們提供入門(mén)級(jí)別的幫助,。



至于為什么只總結(jié)了iOS系統(tǒng)設(shè)計(jì)規(guī)范,,而沒(méi)有Android系統(tǒng)的設(shè)計(jì)規(guī)范,在這里說(shuō)明一下,,本來(lái)安卓系統(tǒng)設(shè)計(jì)規(guī)范也是要涵蓋的,,但通過(guò)查閱資料發(fā)現(xiàn)安卓設(shè)計(jì)規(guī)范介紹少之又少,并且標(biāo)準(zhǔn)不統(tǒng)一,,借鑒意義不大,,所以省略了這部分規(guī)范的編寫(xiě)。



最后祝大家學(xué)習(xí)愉快,,并且有更大的進(jìn)步,!



.

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶(hù)發(fā)布,,不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,,謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多