雷火电竞首页-中国电竞赛事及体育赛事平台

聯系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

ui界面設計規范分享,看看有什么值得學習的

Time: 2020-02-20

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

9f993884bc43aaba70c91604fedc9cb7af995ec86dc9b-82EMd2_fw658_WPS圖片.png

  (圖片來自網絡)

  1、UI設計的組成部分

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

  2、界面設計尺寸及欄高度

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

9f993884bc43aaba70c91604fedc9cb7af995ec86dc9b-82EMd2_fw658_WPS圖片.png

  (圖片來自網絡)

  3、ui界面設計中的卡片間距問題

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

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

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


合作咨詢

上海(總部)

上海市浦東新區郭守敬路498號22號樓
021-61057328
[email protected]

辦公地址地圖

北京

北京市東城區后永康17號A座
010-64015620
[email protected]

辦公地址地圖

成都

四川省成都市錦江區東大街牛王廟段100號
028-62790929
[email protected]

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

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