雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

app ui設(shè)計規(guī)范有什么? 讓你快速的掌握住

Time: 2020-02-07

相信大家對于 ui設(shè)計非常的感興趣吧。接下來就讓我們一起來看看app ui設(shè)計規(guī)范的相關(guān)的內(nèi)容吧,相信大家看完之后,將會有非常大的收獲的,大家還在等什么呢?下面就讓我們一起全面的認識一下吧。

   一、UI設(shè)計

  UI設(shè)計(或稱界面設(shè)計)是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計,也叫界面設(shè)計。UI設(shè)計分為實體UI和虛擬UI,互聯(lián)網(wǎng)說的UI設(shè)計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

  好的UI設(shè)計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現(xiàn)軟件的定位和特點。

app ui設(shè)計規(guī)范有什么? 讓你快速的掌握住

  (圖片來自網(wǎng)絡(luò))

  二、app ui設(shè)計規(guī)范

  1、Android篇

  標注規(guī)范:

  畫布大小:以720 x 1280分辨率為準進行標注。

  字體:按照像素標注,只使用 24 pt,28 pt,36 pt 和 44 pt 的字體,并pt 值除以 2 作為 sp 數(shù)值交給工程師。

  顏色:按照實際的顏色值標注,Android顏色值取值為十六進制的值 比如一綠色的值, 給工程師的值為 #5bc43e。

  間距:每個主要的控件必須標注出來,各種邊距必須標注清楚。所有尺寸的 px 值除以2作為 dp 數(shù)值交給工程師。

  切圖:

  統(tǒng)一采用Png格式

  部分需要做適配的圖片需要制作.9格式

  圖片優(yōu)化:

  圖片壓縮優(yōu)化

  ICON 可采用PNG 8

  支持完全透明和完全不透明兩種效果和256色

  需要高清的可采用 PND24/32

  切圖命名:

  每個頁面按照設(shè)計高保真分目錄:hdpi(480 *800)xhdpi(720 *1080) xxdpi(1080 *1920)。

  依圖片性質(zhì)命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

  設(shè)計圖單位:像素72dpi。在設(shè)計的時候并不是每個尺寸都要做一套,尺寸按自己的手機來設(shè)計,比較方便預覽效果,一般用640 *1136或者750 *1334的尺寸來設(shè)計,現(xiàn)在iPhone6和plus出來后有很多人會使用6的設(shè)計效果。

  Ps:作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便后期的切圖或者尺寸變更。

  2、iOS篇

  標注規(guī)范:

  畫布大?。阂訞2x圖以640/750為寬度尺寸為基準標注。

  字體:按照640/750寬尺寸中的像素進行標注。

  顏色:按照實際的顏色值標注,iOS顏色值取 RGB各顏色的值比如某個色值,給予IOS程序員的色值為 R:12 G:34 B:56給出的值就是 12,34,56(有時也要根據(jù)程序員的習慣,有時也用十六進制)。

  間距:每個主要的控件必須標注出來,各種邊距必須標注清楚。

  切圖:

  統(tǒng)一采用Png格式

  以640/750寬分辨率為@2x輸出三套尺寸:@1x @2x @3x

  圖片優(yōu)化:

  圖片壓縮優(yōu)化

  ICON 可采用PNG 8

  支持完全透明和完全不透明兩種效果和256色

  需要高清的可采用 PND24/32

app ui設(shè)計規(guī)范有什么? 讓你快速的掌握住

 ?。▓D片來自網(wǎng)絡(luò))

  切圖命名:

  每個頁面按照設(shè)計高保真分目錄:@1x @2x @3x。

  在文件名中需要區(qū)分是幾倍圖,例如: xxxxx@2x.png。

  狀態(tài)欄(status bar):就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域,其高度為:40px

  導航欄(navigation):顯示當前界面的名稱,包含相應的功能或者頁面間的跳轉(zhuǎn)按鈕,其高度為:88px

  主菜單欄(submenu,tab):類似于頁面的主菜單,提供整個應用的分類內(nèi)容的快速跳轉(zhuǎn),其高度為:98px

  內(nèi)容區(qū)域(content):展示應用提供的相應內(nèi)容,整個應用中布局變更最為頻繁,其高度為:734px

  至于我們經(jīng)常說的iPhone5/5s的640*1136的尺寸,其實就是中間的內(nèi)容區(qū)域高度增加到910px。

  app ui設(shè)計規(guī)范有什么?以上就是我們?yōu)楦魑慌笥褌冋淼膬?nèi)容,想必大家看完之后,都沒有什么疑問了吧??傊M蠹铱梢詤⒖忌厦娴膬?nèi)容。




合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開