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

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

移動ui界面設計的內容布局,移動ui界面設計風格有哪些

Time: 2021-11-29

     現在的網絡發達,移動端逐漸成為受眾群體龐大的領域。智能手機、筆記本電腦都是移動ui設計的重點領域、今天就讓faceui為大家介紹移動ui界面設計的內容布局,移動ui界面設計風格有哪些。

  移動ui界面設計的內容布局

  在 APP 的設計中內容的布局形式多種多樣,這里介紹最常用的兩種布局形式,列表式布局和卡片式布局。

  1、列表式布局

  列表式布局方式非常普遍,隨便打開一個 APP,基本都存在這種布局方式,其布局形式的特點在于能夠在較小的屏幕中顯示多條信息,用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

  以我們最常用的微信和 QQ 為例,其「信息」頁面都是采用的列表式布局,在采用這種布局形式的時候要注意列表舒適體驗的最小高度是80px,最大的高度要視內容的多少而定。

1.jpeg

  圖片來源于網絡

  2、卡片式布局

  形式非常靈活。其特點在于,每張卡片的內容和形式都可以相互獨立,互不干擾,所以可以在同一個頁面中出現不同的卡片承載不同的內容。而由于每張卡片都是獨立存在的,其信息量可以相對列表更加豐富。

  在使用卡片式布局的時候要注意卡片本身一般是白色的,而卡片之間的間距顏色一般是淺灰色,當然不同產品風格顏色可能不一樣,有些是淺灰色偏藍等。

  雙欄卡片的布局形式,比較常見于以圖片信息為主導的App。例如一些商城的商品陳列頁面。這種形式與卡片式類似,但它能在一屏里顯示更多的內容,至少4張卡片。同時,由于分開左右兩欄的顯示,用戶可以更加方便地對比左右兩欄卡片的內容。

  移動ui界面設計風格

  1、移動APP產品的設計首先應該緊跟業界的主流設計風格:扁平化設計。

  扁平化設計有明顯的幾個好處:界面美觀、簡約大方、條理清晰;設計元素上強調抽象、極簡、符號化,去除冗余的裝飾效果突顯App的文字圖片等信息內容。完美兼容pc網站、安卓、ios等不同系統的平臺和不同屏幕分辨率的設備,適應性強。

1.png

  圖片來源于網絡

  2、設計風格的配色除了要注意男女性的喜好差別,還應該重視通過冷暖色彩+明暗亮度搭配表現給用戶的印象和心理感受。

  APP產品設計定為扁平化,然后考驗的是設計師界面配色的專業功力了。在設計風格表現上,顏色占據了80%以上的視覺體驗。因此要做好設計風格,主要做好界面的顏色搭配和分布。另外顏色是有情感的,不同的色彩能給于用戶不同的印象和感受,而且不同的人群對顏色偏好也是不一樣的。所以在為APP設計進行配色時,需要考慮不同用戶的喜好和體會配色給用戶帶來的視覺感受。

  設計風格是設計起始的第一步,定好了設計風格,后續的設計工作才能繼續安排。要確保設計風格匹配用戶人群的喜好,符合APP的定位以及給用戶傳遞APP正面良好的形象。

  以上就是faceui為大家介紹的關于移動ui界面設計的相關內容。移動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
或保存二維碼在微信中打開