首頁技術(shù)文章正文

UI設(shè)計(jì)師必備技能:APP 界面設(shè)計(jì)原則

更新時(shí)間:2019-11-01 來源:網(wǎng)絡(luò) 瀏覽量:

APP軟件界面設(shè)計(jì)不純粹是技術(shù)設(shè)計(jì),也不再是純粹的進(jìn)行視覺圖像的藝術(shù)組合,它牽涉到用戶行為分析、視覺傳達(dá)設(shè)計(jì)、人機(jī)交互、設(shè)計(jì)開發(fā)。

 

1、圖標(biāo)文字規(guī)則

(1)圖標(biāo)是傳遞給用戶的第一種視覺體驗(yàn),它反映了產(chǎn)品的風(fēng)格、功能和質(zhì)量。由于APP界面受手機(jī)屏幕尺寸的限制,在圖形方面,首先是符合應(yīng)用程序主題的圖形,并對(duì)產(chǎn)品本身的設(shè)計(jì)進(jìn)行了集成,以確保圖形的真實(shí)性。其次,選擇清晰度較高的圖形。具體,直觀,直觀,允許用戶在短時(shí)間內(nèi)獲得更多信息。

 

圖標(biāo)通常是有效和直接的表現(xiàn)形式。在APP界面的設(shè)計(jì)中,每個(gè)圖標(biāo)都是特定功能的,用來表示一個(gè)操作或功能的示意圖。原則是盡可能簡單,簡潔,可識(shí)別,隱喻。準(zhǔn)確表達(dá)它所代表的功能。

 

盡量使用,矢量圖形。矢量圖形應(yīng)該用于設(shè)計(jì)圖標(biāo)可以隨意調(diào)整大小,放大后不失真,保證了圖像的清晰度。

 

(2)在文本設(shè)計(jì)中,字體大小和字體是區(qū)分重要信息層次的有效手段;二是行寬與行高的比值,遵循左右對(duì)齊、左對(duì)齊、居中對(duì)齊、對(duì)齊、縮小的原則。必要的文字對(duì)比度,調(diào)整合理的字距;最后是留白,適當(dāng)?shù)目崭褚栽黾有畔⒌囊鬃x性。


1572588243549_UI.jpg

 

2、布局原理規(guī)則

頁面布局是對(duì)頁面的文本、圖形或表格的合理安排和設(shè)計(jì)。在頁面的布局中,需要考慮用戶的需求和用戶行為,明確信息的層次關(guān)系,最大限度地提高信息傳輸?shù)男省?/p>

(1)Logo放置每頁相同位置,數(shù)據(jù)內(nèi)容按主次先后有序排列,重要信息放置主頁及界面中等偏上的位置,遵循人們從上到下,從左到右的閱讀習(xí)慣,主頁長度適度,其他頁面也不宜過長,頁面盡量采用分頁。

(2)明確每個(gè)頁面需突出的重要信息,能夠通過色彩顏色、圖形、文字大小、間距、留白等進(jìn)行對(duì)比區(qū)別,拉開層次,突出顯示重要信息。

(3)導(dǎo)航盡量采用底部導(dǎo)航或一側(cè)導(dǎo)航有利于用戶引導(dǎo)和了解頁面布局,不占左右空間。設(shè)計(jì)師在對(duì)APP布局前,對(duì)應(yīng)用的功能需求有清晰的把握,在每一級(jí)別的頁面,應(yīng)該清楚知道整個(gè)應(yīng)用的界面跳轉(zhuǎn)和層級(jí)關(guān)系,明確每個(gè)頁面的凸現(xiàn)信息。

 

3、人機(jī)交互規(guī)則

APP的人機(jī)交互在設(shè)計(jì)操作界面時(shí)需要根據(jù)人們使用手機(jī)的習(xí)慣進(jìn)行設(shè)計(jì),讓用戶在與app的交互過程中體驗(yàn)到產(chǎn)品的可靠性、易用性和趣味性。

(1)可靠性是指軟件在用戶操作過程中的穩(wěn)定性,不存在閃回、延時(shí)等基本錯(cuò)誤。

(2)易用性是指簡化操作,讓不同年齡段的用戶快速入門,簡化清算操作,增加用戶對(duì)產(chǎn)品操作的信心,降低產(chǎn)品使用錯(cuò)誤率。

(3)可靠性和易用性是基礎(chǔ),樂趣是核心。有趣的是用戶對(duì)應(yīng)用程序操作的使用增加了人性化的關(guān)懷和情感注入,而有趣元素的使用則讓界面“活”起來。

 

4、色彩搭配規(guī)矩

色彩在軟件界面設(shè)計(jì)中起著重要的作用。一款好的手機(jī)APP設(shè)計(jì)作品,配色占70%左右,其他30%則分布到排版文字設(shè)計(jì)、圖形處理等方面,并可添加合理的色彩應(yīng)用界面的合理性對(duì)于幫助操作者快速發(fā)現(xiàn)界面的關(guān)鍵信息,獲得更好的視覺效果有著重要的作用。不同的用戶對(duì)每種顏色都有不同的視覺感受。APP界面顏色分為主色、輔助色和點(diǎn)睛色。主色決定畫面風(fēng)格的色彩,通常應(yīng)用于導(dǎo)航條,主要顏色與品牌的顏色一致;輔助色使畫面更加完美和豐富,主色被修改;點(diǎn)晴色在標(biāo)題文本、按鈕、圖標(biāo)等誰用,強(qiáng)調(diào)和引導(dǎo)閱讀功能,同時(shí)突出獨(dú)特的畫面風(fēng)格?!就扑]了解:UI設(shè)計(jì)課程

 

主色進(jìn)行上,可使用鮮亮飽和度較高的顏色,在頁面中比例占據(jù)較多。輔助色進(jìn)行上,根據(jù)主色基調(diào),進(jìn)行主色同類色、鄰近色、對(duì)比色及互補(bǔ)色作為輔助色。點(diǎn)睛色一般使用飽和度和明度較高的顏色,點(diǎn)睛色一般與主色相反,主色明度高,點(diǎn)綴色一般用深顏色或飽和度高的顏色,反正明度低,點(diǎn)睛色飽和度明度高的顏色。

 

APP生存本身實(shí)用性是根本,藝術(shù)性和舒適的操作是點(diǎn)睛之筆,當(dāng)APP的功能美和形式美真正統(tǒng)一起來,這樣的APP才有生存的能力。


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!