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

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

ui界面設(shè)計規(guī)范分享,看看有什么值得學(xué)習(xí)的

Time: 2020-02-20

如果你也想要讓自己的設(shè)計更加的合理的話,就需要要學(xué)習(xí)關(guān)于ui界面設(shè)計規(guī)范的內(nèi)容,是不是非常的感興趣呢?接下來就讓我們一起來看看有什么值得我們學(xué)習(xí)的內(nèi)容吧。

9f993884bc43aaba70c91604fedc9cb7af995ec86dc9b-82EMd2_fw658_WPS圖片.png

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

  1、UI設(shè)計的組成部分

  UI設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計,主要包括三個部分:交互設(shè)計、用戶研究、界面設(shè)計。UI界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一樣,是產(chǎn)品的重要買點(diǎn)之一

  2、界面設(shè)計尺寸及欄高度

  目前主流的 iOS 設(shè)備主要有 iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸),它們都采用了 Retina 視網(wǎng)膜屏幕,其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,無論是欄高度還是應(yīng)用圖標(biāo),設(shè)計師提供給開發(fā)人員的切片大小,前者始終是后者的1.5倍,并分別以@3x和@2x在文件名結(jié)尾命名,程序再根據(jù)不同分辨率自動加載@3x或者@2x的切片。

9f993884bc43aaba70c91604fedc9cb7af995ec86dc9b-82EMd2_fw658_WPS圖片.png

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

  3、ui界面設(shè)計中的卡片間距問題

  在移動端頁面設(shè)計中卡片式布局是非常常見的布局方式,至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定,通常最小不低于16px,過小的間距會造成用戶的緊張情緒,使用最多的間距是20px、24px、30px、40px,當(dāng)然間距也不宜過大,過大的間距會使界面變得松散,間距的顏色設(shè)置可以與分割線一致,也可以更淺一些。

  以 iOS(750*1334px)為例,設(shè)置頁面不需要承載太多的信息,因此采用了較大的70px作為卡片間距,有利于減輕用戶的閱讀負(fù)擔(dān),而通知中心承載了大量的信息,過大的間距會讓瀏覽變得不連貫和界面視覺松散,因此采用了較小的16px作為卡片的間距。

  ui界面設(shè)計規(guī)范的內(nèi)容如上文所述,大家是不是都看完了呢?總之,希望上面的內(nèi)容可以很好的幫助大家掌握相關(guān)的技能。


合作咨詢

上海(總部)

上海市浦東新區(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

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