手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
更新時(shí)間:2022-03-23 17:21:39作者:佚名
手機(jī)APP設(shè)計(jì)規(guī)范之圖標(biāo)和按鈕視覺設(shè)計(jì)規(guī)范。
手機(jī)APP設(shè)計(jì)規(guī)范指對整套APP界面進(jìn)行視覺設(shè)計(jì)UI風(fēng)格的統(tǒng)一,對界面元素的樣式、顏色、圖標(biāo)按鈕和大小設(shè)定統(tǒng)一的規(guī)范和使用原則。方便以后協(xié)調(diào)合作和APP視覺迭代。
第一部分:APP界面里面的圖標(biāo)(iCON)設(shè)計(jì)規(guī)范
我們在繪制APP UI界面設(shè)計(jì)里面的圖標(biāo),在PS里面盡可能用形狀來繪制。保證圖標(biāo)和按鈕是矢量圖。切圖的時(shí)候的格式都是PNG。而且是圖標(biāo)和按鈕的尺寸大小必須為偶數(shù)。
App 里的圖標(biāo)還應(yīng)該根據(jù)不同的功能需求設(shè)計(jì)不同的狀態(tài):如常態(tài)、選中態(tài)、點(diǎn)擊態(tài)等。而且每一個(gè)圖標(biāo)除了英文的命名以為,還需要一個(gè)中文名字的備注下圖標(biāo)所代表的含義。讓開發(fā)和其他同事看得懂。這也是我們做APP視覺規(guī)范的最終目的。
每一個(gè)手機(jī)APP設(shè)計(jì)師的整理自己的APP圖標(biāo)視覺規(guī)范是不一樣的。小編就跟大家推薦2種圖標(biāo)視覺設(shè)計(jì)規(guī)范分類方法。
1、按照界面位置和模塊來分類
APP圖標(biāo)視覺規(guī)范
2、按照功能模塊來分類:分為功能型圖標(biāo)和示意型圖標(biāo)。
APP圖標(biāo)規(guī)范分類
當(dāng)然你也可以有自己的APP圖標(biāo)視覺規(guī)范規(guī)則。只要你們自己可以看得明白就行。
以上2種APP界面里面的圖標(biāo)(iCON)設(shè)計(jì)規(guī)范分類方式,僅供參考。
第二部分:APP界面里面的按鈕(Button)設(shè)計(jì)規(guī)范
App 里的按鈕擁有 4 種屬性:分?e為一般、點(diǎn)擊、不能點(diǎn)擊、選中
按鈕規(guī)范因不同功能和場景需要,設(shè)計(jì)不同的樣式和顏色,在尺寸上也分有:長、中、短;而且按不同手機(jī)平臺(tái)長中短尺寸也注意有所不同。
按鈕切圖一般以.png切圖為最佳,無論是ios和andorid平臺(tái)。切記
APP圖標(biāo)按鈕設(shè)計(jì)規(guī)范
APP里面的按鈕也分為:重要按鈕、一般按鈕和軟弱按鈕
重要按鈕:一般是指在整個(gè)界面當(dāng)中比較大,醒目的位置,通常是指執(zhí)行重要操作以及吸附在底部的按鈕。比如下單、搜索、確定、提交等等操作。
一般按鈕:不是特別重要操作的按鈕。比如清空、退出、說明性的等按鈕。
重要按鈕和一般按鈕都是文字是在按鈕上的,而且占的面積比較大。
軟弱按鈕:這里指優(yōu)先級(jí)最低的一種按鈕,這類案例主要是文字和圖標(biāo)一起搭配出現(xiàn)的。比如篩選、排序等按鈕。