手機APP設(shè)計規(guī)范圖標(biāo)和按鈕視覺設(shè)計規(guī)范

2023-08-30    分類: 網(wǎng)站建設(shè)

今天25學(xué)堂的小編在網(wǎng)上和站酷上學(xué)習(xí)圖標(biāo)繪制的方法之后,于是很有沖動來整頓一下手機app設(shè)計規(guī)范之圖標(biāo)和按鈕視覺設(shè)計規(guī)范。

手機APP設(shè)計規(guī)范指對整套APP界面進(jìn)行視覺設(shè)計UI風(fēng)格的同一,對界面元素的樣式、顏色、圖標(biāo)按鈕和大小設(shè)定同一的規(guī)范和使用原則。方便以后協(xié)調(diào)合作和APP視覺迭代。

部分:APP界面里面的圖標(biāo)(iCON)設(shè)計規(guī)范

我們在繪制APP UI界面設(shè)計里面的圖標(biāo),在PS里面盡可能用外形來繪制。保證圖標(biāo)和按鈕是矢量圖。切圖的時候的格式都是PNG。而且是圖標(biāo)和按鈕的尺寸大小必須為偶數(shù)。

App 里的圖標(biāo)還應(yīng)該根據(jù)不同的功能需求設(shè)計不同的狀況:如常態(tài)、選中態(tài)、點擊態(tài)等。而且每一個圖標(biāo)除了英文的命名以為,還需要一個中文名字的備注下圖標(biāo)所代表的含義。讓開發(fā)和其他同事看得懂。這也是我們做APP視覺規(guī)范的目的。

每一個手機APP設(shè)計師的整頓自己的APP圖標(biāo)視覺規(guī)范是不一樣的。25學(xué)堂就跟大家推薦2種圖標(biāo)視覺設(shè)計規(guī)范分類方法。

1、按照界面位置和模塊來分類。如下圖:

2、按照功能模塊來分類:分為功能型圖標(biāo)和示意型圖標(biāo)。如下圖

當(dāng)然你也可以有自己的APP圖標(biāo)視覺規(guī)范規(guī)則。只要你們自己可以看得曉暢就行。

以上2種APP界面里面的圖標(biāo)(iCON)設(shè)計規(guī)范分類體例,僅供參考。

第二部分:APP界面里面的按鈕(Button)設(shè)計規(guī)范

App 里的按鈕擁有 4 種屬性:分別為一般、點擊、不能點擊、選中

按鈕規(guī)范因不同功能和場景需要,設(shè)計不同的樣式和顏色,在尺寸上也分有:長、中、短;而且按不同手機平臺長中短尺寸也注重有所不同。

按鈕切圖一般以.9.png切圖為好,無論是ios和andorid平臺。切記

常見的圖標(biāo)和按鈕視覺設(shè)計規(guī)范信息圖如下:

APP里面的按鈕也分為:主要按鈕、一般按鈕和軟弱按鈕

主要按鈕:一般是指在整個界面當(dāng)中比較大,醒目的位置,通常是指執(zhí)行主要操作以及吸附在底部的按鈕。比如下單、搜索、確定、提交等等操作。

一般按鈕:不是特殊主要操作的按鈕。比如清空、退出、說明性的等按鈕。

主要按鈕和一般按鈕都是文字是在按鈕上的,而且占的面積比較大。

軟弱按鈕:這里指優(yōu)先級低的一種按鈕浙江做網(wǎng)站百度排名,這類案例主要是文字和圖標(biāo)一路搭配出現(xiàn)的。比如篩選、排序等按鈕。

25學(xué)堂今天就跟大家分享這些,應(yīng)該說APP界面設(shè)計當(dāng)中應(yīng)用到的圖標(biāo)和按鈕基本都說了下上海做網(wǎng)站中心網(wǎng),大家也可以借鑒上面的這些案例來定義自己的app視覺規(guī)范和app功能模塊需求文檔。

名稱欄目:手機APP設(shè)計規(guī)范圖標(biāo)和按鈕視覺設(shè)計規(guī)范
當(dāng)前路徑:http://www.bm7419.com/news19/279719.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、Google、網(wǎng)站維護(hù)虛擬主機、網(wǎng)站設(shè)計公司、ChatGPT

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司