超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

移動(dòng)端UI設(shè)計(jì)流程和規(guī)范-從0到1的設(shè)計(jì)移動(dòng)端UI設(shè)計(jì)工作方式

2023-6-1    資深UI設(shè)計(jì)者


一、獲取原型圖

從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖,當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì),要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位等等,特別是對功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通,只有做到對項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。

二、競品分析

當(dāng)我們對項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位都有所了解后,還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對市面上同類型的產(chǎn)品進(jìn)行分析和對比,包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等,了解其優(yōu)劣勢,做到取長補(bǔ)短,思考如何讓我們的產(chǎn)品更加的完善,這時(shí)候我們的腦海里面基本上對自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。

三、設(shè)計(jì)UI界面

1、界面設(shè)計(jì)規(guī)范

這篇文章內(nèi)所有的數(shù)值均以2倍圖為例,使用1倍圖的同學(xué)請自行除以2。

現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范,全面屏的設(shè)計(jì)稿更加美觀,且做作品集的時(shí)候搭配全面屏樣機(jī)視覺效果也更加突出。通常只設(shè)計(jì)一套蘋果全面屏的設(shè)計(jì)稿,不需要另外設(shè)計(jì)安卓端設(shè)計(jì)稿,安卓端由安卓工程師自行適配。

界面尺寸:

界面:750px1624px

狀態(tài)欄:750x88px

導(dǎo)航欄:750x88px

菜單欄:750x98px

指示器:750x68px

左右邊距:32px或24px

*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計(jì),是系統(tǒng)默認(rèn)控件,除顏色外不可改變。



常用圖標(biāo)尺寸:

頂部功能:48x48px



底部菜單欄(有文字):48x48px



底部菜單欄(無文字):64x64px




文字:

尺寸:36px、32px、28px、24px



顏色:正常(#333333)、輔助(#999999)、未輸入提示(#CCCCCC)



*利用文字尺寸對比和顏色對比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色,讓顏色不那么呆板。

2、組件控件系統(tǒng)

組建控件系統(tǒng)可以讓我們的設(shè)計(jì)稿更加的規(guī)范,也便于修改,可以極大的提高我們的工作效率。

所有的圖標(biāo)都需要做成控件,方便我們切圖。然后就是會重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。

除了我們常用的控件以外,顏色、投影等特殊效果、文字大小都可以保存樣式,把項(xiàng)目的配色、特殊效果、文字尺寸都保存下來,不同的設(shè)計(jì)工具有不同的保存方式,大家可以根據(jù)自己使用的設(shè)計(jì)工具進(jìn)行設(shè)置。



3、設(shè)計(jì)風(fēng)格

我們需要讓項(xiàng)目保持一個(gè)統(tǒng)一的設(shè)計(jì)風(fēng)格,讓項(xiàng)目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢,選對與項(xiàng)目屬性相符的設(shè)計(jì)風(fēng)格可以讓項(xiàng)目更加的出彩。

傳統(tǒng)UI風(fēng)格:

這種風(fēng)格沒找到合適的名稱,我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊,用背景色塊分割大的模塊,特別適合列表信息。雖然給人感覺沒有特別強(qiáng)烈的設(shè)計(jì)感,但簡單實(shí)用、樸實(shí)無華,層級劃分清晰明了。



卡片式風(fēng)格:

卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念,將一個(gè)模塊或同類型元素放到一個(gè)卡片容器類,可以增加內(nèi)容的獨(dú)立性,讓模塊劃分關(guān)系變得非常的清晰,是現(xiàn)在非常常用的一種設(shè)計(jì)方式。

常用做法是采用淺灰的背景+白色卡片的方式,卡片都帶有一定的圓角,類似于將撲克牌一張張的放在桌子上,桌面是灰色背景,每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì),背景會更暗一些,卡片略亮。




大標(biāo)題去線段化:

在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線,單以間距來區(qū)分模塊和元素,對親密性的應(yīng)用有較高的要求。有時(shí)候單以間距來區(qū)分模塊和元素時(shí),可能會導(dǎo)致模塊層級不分明,所以會使用將標(biāo)題加大的形式,讓模塊與模塊之間的區(qū)分更加明顯。因?yàn)槿コ朔指罹€,留白就更多,會顯得界面更加的干凈、清爽。



新擬態(tài)設(shè)計(jì)風(fēng)格:

新擬態(tài)是19年底在追波開始出現(xiàn)的一種設(shè)計(jì)風(fēng)格,特點(diǎn)是使用統(tǒng)一的光源做出立體的浮雕效果,元素有厚度但沒有紋理和材質(zhì)的輕擬物風(fēng)。

常規(guī)做法是假設(shè)一個(gè)統(tǒng)一的左上方光源,給元素分別添加一個(gè)左上角和右下角的投影,左上角(被光源照射的一側(cè))投影使用亮色,右下角投影使用暗色,讓元素可以浮起來。而在按下或選中狀態(tài)時(shí)則使用兩個(gè)內(nèi)陰影,左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個(gè)顏色,所以顏色不能使用純白或純黑,否則有一側(cè)的投影就會看不見,通常是使用藍(lán)灰色或深灰色背景。

新擬態(tài)風(fēng)格視覺效果新穎、柔和,對比度低,看得久了會產(chǎn)生一定的視覺疲勞,研發(fā)成本也較高,所以現(xiàn)在更多的還是處于概念稿,實(shí)際項(xiàng)目中應(yīng)用較少??梢宰鳛橐环N練習(xí)或部分功能的使用。





四、交付

1、切圖

設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開發(fā),IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。


切圖套數(shù)

IOS:現(xiàn)在通常是輸出2套,以@2x、@3X為后綴,也就是2倍圖、3倍圖;

Android:現(xiàn)在通常是輸出3套,xhdpi(超清,對應(yīng)IOS的2倍圖)、xxhdpi(超超清,對應(yīng)IOS的3倍圖)、xxxhdpi(超超超清),安卓切圖不需要將倍數(shù)加到切圖命名內(nèi),而是每種尺寸單獨(dú)建立一個(gè)文件夾。




輸出格式

png:最常用的切圖文件格式,背景無底透明,所以在導(dǎo)出切圖文件時(shí)需要先去掉背景色(figma將畫板填充色隱藏,sketch畫板不要勾選“包含于導(dǎo)出項(xiàng)”);


svg:矢量切圖,需要背景無底透明,部分網(wǎng)頁端項(xiàng)目可能需要svg格式的切圖文件;


bmp:部分硬件機(jī)器的項(xiàng)目需要使用的圖片格式,需要注意的是bmp無法實(shí)現(xiàn)背景透明,如果背景是透明的會自動(dòng)帶上白色,需要切圖文件把背景帶上一起切,而且figma和sketch等UI設(shè)計(jì)軟件無法直接導(dǎo)出bmp格式,需要先導(dǎo)出為png或jpg格式,再使用ps或其他工具轉(zhuǎn)換一次。


切圖命名

只能使用英文、下滑線、數(shù)字進(jìn)行命名,不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)(有些切圖沒有多種狀態(tài)則不需要添加狀態(tài)命名)。

以蘋果端舉例:如底部菜單欄的首頁圖標(biāo)命名則是ico_bottom_home_nor@2x(圖標(biāo)_底部_首頁_未選中狀態(tài))和ico_bottom_home_sel@2x(圖標(biāo)_底部_首頁_選中狀態(tài))。



頂部的搜索圖標(biāo)沒有多個(gè)狀態(tài),命名是ico_nav_search@2x(圖標(biāo)_頂部_搜索)。



類別一般只有3種:圖標(biāo)(icon)、圖片(image)、按鈕(button),我們通常會簡寫為ico、img、btn。




狀態(tài)一般只有4種:正常(normal)、按下(press)選中(selected)、禁用(disabled),我們通常會簡寫為nor、pre、sel、dis。pc端會多一種狀態(tài):懸停(hover)。




sketch和figma等UI設(shè)計(jì)軟件可以同時(shí)導(dǎo)出多個(gè)尺寸的切圖文件和前綴/后綴,所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel,而不需要每個(gè)切圖都去手動(dòng)的添加IOS后綴的@2x和@3X,以及安卓的前綴xhdpi等,在導(dǎo)出設(shè)置中設(shè)置好每個(gè)尺寸的文件夾名稱和后綴,再統(tǒng)一導(dǎo)出即可。




切圖輸出

軟件內(nèi)部導(dǎo)出:現(xiàn)在的UI設(shè)計(jì)軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件,只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴,就可以快速的導(dǎo)出切圖文件;


上傳第三方:最常用的就是將設(shè)計(jì)文件上傳至藍(lán)湖,研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件,但在上傳藍(lán)湖之前需要把設(shè)計(jì)稿中需要切圖的元素設(shè)置為切片。


2、標(biāo)注

和切圖文件一起交付給開發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件,讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對齊方式、距離、透明度,文字的字體、字號、行高等。


輸出到藍(lán)湖

很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件,再通過插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖,研發(fā)人員就可以便捷的查看界面的標(biāo)注。


軟件內(nèi)部標(biāo)注

Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開發(fā)者模式,只需要將研發(fā)人員邀請到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi),研發(fā)人就可以查看到界面的標(biāo)注;


插件導(dǎo)出

有部分公司有一定的保密措施,會禁止設(shè)計(jì)師使用第三方平臺或是聯(lián)網(wǎng)操作,這種情況設(shè)計(jì)也無法使用Figma、Mastergo等在線設(shè)計(jì)軟件,只能使用Sketch等客戶端,輸出標(biāo)注就需要使用相應(yīng)的插件,Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。


五、上線

在項(xiàng)目上線的階段UI設(shè)計(jì)需要輔助研發(fā)提供上線應(yīng)用商店需要的項(xiàng)目預(yù)覽圖、啟動(dòng)LOGO,也需要設(shè)計(jì)補(bǔ)充出APP的啟動(dòng)頁、閃屏頁等。


1、項(xiàng)目預(yù)覽頁

上線應(yīng)用商店需要的預(yù)覽圖,通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。


2、啟動(dòng)LOGO

上線應(yīng)用商店必須提供的LOGO,手機(jī)中啟動(dòng)APP的入口,但不同的應(yīng)用商店有不同的尺寸,華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同,所以輸出多個(gè)尺寸。以蘋果App Store為例,需要以下尺寸:




3、啟動(dòng)頁、引導(dǎo)頁

啟動(dòng)頁和引導(dǎo)頁一般是和UI界面一起設(shè)計(jì),不過需要項(xiàng)目上線后才會有其價(jià)值,所以可以先設(shè)計(jì)完項(xiàng)目的界面,在研發(fā)開發(fā)的過程中再去設(shè)計(jì)啟動(dòng)頁和引導(dǎo)頁,只要在項(xiàng)目上線前提供給研發(fā)就可以。


六、持續(xù)跟進(jìn)和優(yōu)化

當(dāng)一個(gè)項(xiàng)目上線后,只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會收集用戶反饋,根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計(jì),通過持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來越好,這個(gè)過程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。


作者:Mu姜子
鏈接:https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔