ui設(shè)計(jì)是現(xiàn)在非常熱門的設(shè)計(jì)行業(yè),在很多人看來ui設(shè)計(jì)可能很難,其實(shí)了解ui設(shè)計(jì)的操作其實(shí)不難,難在如何將設(shè)計(jì)的APP讓大眾認(rèn)可。今天就讓faceui為大家介紹ui設(shè)計(jì)app的相關(guān)規(guī)范,app界面設(shè)計(jì)風(fēng)格。
ui設(shè)計(jì)app的相關(guān)規(guī)范
APP版式設(shè)計(jì)規(guī)范:
版式設(shè)計(jì)又叫做版面編輯,即在有限的版面空間里,將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進(jìn)行組合排列。
1、對齊
對齊是貫穿版式設(shè)計(jì)的最基礎(chǔ),最重要的原則之一,它能建立起一種整齊劃一的外觀,帶給用戶有序一致的瀏覽體驗(yàn)。
2、對稱
對稱是宇宙間的設(shè)計(jì)哲學(xué),是對立統(tǒng)一規(guī)律的本質(zhì)屬性,呈現(xiàn)出一種和諧自然的美,在應(yīng)用界面的設(shè)計(jì)中,引導(dǎo)頁設(shè)計(jì)、注冊登錄輸入框和按鈕等無一不是對稱的設(shè)計(jì)。
3、分組
物以類聚,人以群分。分組是將同類別的信息組合在一起,直觀的呈現(xiàn)在用戶的面前,這樣的設(shè)計(jì)能夠減少用戶的認(rèn)知負(fù)擔(dān),在移動(dòng)端界面的設(shè)計(jì)中最常見的分組方式就是卡片,為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。
ui設(shè)計(jì)app
界面文字設(shè)計(jì)規(guī)范:
文字是 APP 中最核心的元素,是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容。
在一款 APP 中字號范圍一般在20-36之間(@2x),當(dāng)然 iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì),字號還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點(diǎn)是所有的字號設(shè)置都必須為偶數(shù),上下級內(nèi)容字號極差關(guān)系為2-4號。
關(guān)于字體:在 iOS 9推出之前設(shè)計(jì)師普遍采用華文黑體、谷歌思源、冬青等字體進(jìn)行設(shè)計(jì),iOS 9推出了蘋果自己的字體——蘋方!自此之后蘋方字體被廣泛應(yīng)用于移動(dòng)端設(shè)計(jì)中。
關(guān)于字體顏色和是否加粗:字體的顏色設(shè)置我們一般很少用純黑色,一般用深灰色和淺灰色、細(xì)體和粗體(注意要用字體本身的字重,不能用 PS 的加粗功能)來區(qū)分重要信息和次要信息,進(jìn)行信息層級的劃分。
app界面設(shè)計(jì)風(fēng)格
app設(shè)計(jì)風(fēng)格是指app通過主要的幾種顏色搭配、頁面布局和NPC等給用戶呈現(xiàn)出的整體視覺感受。
一個(gè)app開始啟動(dòng)設(shè)計(jì)時(shí),第一步應(yīng)該用主要頁面定下整個(gè)app的設(shè)計(jì)風(fēng)格,然后其他頁面按著統(tǒng)一的設(shè)計(jì)風(fēng)格進(jìn)行細(xì)致的設(shè)計(jì)美化。統(tǒng)一設(shè)計(jì)風(fēng)格能給用戶呈現(xiàn)整體一致的視覺體驗(yàn),有利于傳達(dá)產(chǎn)品整體的品牌形象;也方便設(shè)計(jì)團(tuán)隊(duì)制定設(shè)計(jì)規(guī)范,減少設(shè)計(jì)風(fēng)格不一致帶來的溝通成本。
app設(shè)計(jì)風(fēng)格從視覺效果上至少給用戶傳達(dá)了兩個(gè)信息:一是app的整體基調(diào)。二是app的目標(biāo)人群。原則上產(chǎn)品經(jīng)理不應(yīng)該干擾限制設(shè)計(jì)師的創(chuàng)意和靈感,但產(chǎn)品定位是什么、產(chǎn)品目標(biāo)人群是誰。以上兩點(diǎn)產(chǎn)品經(jīng)理在提設(shè)計(jì)需求之前務(wù)必清晰傳達(dá)到給設(shè)計(jì)師。
ui設(shè)計(jì)app
那么設(shè)計(jì)師出的稿子,如何判斷是不是符合我們產(chǎn)品的設(shè)計(jì)風(fēng)格呢?這里要求產(chǎn)品經(jīng)理必須把設(shè)計(jì)的常識和基礎(chǔ)原理弄懂,閱讀相關(guān)的設(shè)計(jì)書籍,并且有意識的去體驗(yàn)和對比各種app產(chǎn)品的設(shè)計(jì),提高產(chǎn)品的鑒賞能力。
1、移動(dòng)app產(chǎn)品的設(shè)計(jì)首先應(yīng)該緊跟業(yè)界的主流設(shè)計(jì)風(fēng)格:扁平化設(shè)計(jì)。扁平化設(shè)計(jì)有明顯的幾個(gè)好處:界面美觀、簡約大方、條理清晰;設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡、符號化,去除冗余的裝飾效果突顯app的文字圖片等信息內(nèi)容;完美兼容pc網(wǎng)站、安卓、ios等不同系統(tǒng)的平臺和不同屏幕分辨率的設(shè)備,適應(yīng)性強(qiáng)。
2、app產(chǎn)品設(shè)計(jì)定為扁平化,然后考驗(yàn)的是設(shè)計(jì)師界面配色的專業(yè)功力了。在設(shè)計(jì)風(fēng)格表現(xiàn)上,顏色占據(jù)了80%以上的視覺體驗(yàn)。因此要做好設(shè)計(jì)風(fēng)格,主要做好界面的顏色搭配和分布。另外顏色是有情感的,不同的色彩能給于用戶不同的印象和感受,而且不同的人群對顏色偏好也是不一樣的。所以在為app設(shè)計(jì)進(jìn)行配色時(shí),需要考慮不同用戶的喜好和體會(huì)配色給用戶帶來的視覺感受。設(shè)計(jì)風(fēng)格的配色除了要注意男女性的喜好差別,還應(yīng)該重視通過冷暖色彩+明暗亮度搭配表現(xiàn)給用戶的印象和心理感受。
總的來說,設(shè)計(jì)風(fēng)格是設(shè)計(jì)起始的第一步,定好了設(shè)計(jì)風(fēng)格,后續(xù)的設(shè)計(jì)工作才能繼續(xù)安排。要確保設(shè)計(jì)風(fēng)格匹配用戶人群的喜好,符合app的定位以及給用戶傳遞app正面良好的形象。確定設(shè)計(jì)風(fēng)格階段,產(chǎn)品經(jīng)理和設(shè)計(jì)師花費(fèi)再多的時(shí)間和精力來折騰也是值得的。
以上就是faceui為大家介紹的關(guān)于ui設(shè)計(jì)app的相關(guān)內(nèi)容。ui設(shè)計(jì)的內(nèi)容很多,app只是一個(gè)展示ui設(shè)計(jì)的成果。ui設(shè)計(jì)app要想設(shè)計(jì)出優(yōu)秀的作品,還是要多站在用戶的角度去思考和設(shè)計(jì)。