大家好！今天讓小編來大家介紹下關于常見ui設計規(guī)范的框架結構的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、移動端幾種常見的界面設計布局

• 2、如何定義UI設計視覺規(guī)范

• 3、32個實用酷炫的Android開源UI框架

• 4、UI設計網頁設計字體規(guī)范應該要注意什么

一、移動端幾種常見的界面設計布局

這里我畫了幾種移動端常見的頁面布局和他們的各自特點：

1，列表式布局

2，陳列式布局

3，九宮格式布局

4，選項卡式布局

5，輪播圖式布局

6，伸展式布局

7，抽屜式布局

8，彈出框式布局

9，橫向拓展式布局

10、多面板式布局

1，列表式布局

特點：

內容從上向下排列，導航之間的跳轉要回到初始點。

優(yōu)點：

1、層次展示清晰

2、視覺流線從上向下，瀏覽體驗快捷

3、可展示內容較長的菜單或擁有次級文字內容的標題

不足：

1、導航之間的跳轉要回到初始點

2、同級內容過多時，用戶瀏覽容易產生疲勞

3、排版靈活性不是很高

4、只能通過排列順序、顏色來區(qū)分各入口重要程度

場景：

列表菜單適合用來顯示平級菜單，且較長或擁有次級文字內容的標題

2，陳列式布局

特點：

布局比較靈活，設計師可以平均分布這些網絡，也可根據內容的重要性不規(guī)則分布，相對列表式，其優(yōu)點在于同樣的高度下可放置更多的菜單，更具有流動性，曝布流就屬于其中一種。

優(yōu)點：

1、直觀展現各項內容

2、方便瀏覽經常更新的內容

不足：

1、不適合展現頂層入口框架

2、容易形成界面內容過多，顯得雜亂

3、設計效果容易呆板

場景：

適合以圖片為主的單一內容瀏覽型的展示

3，九宮格式布局

特點：

相比陳列館式，布局比較穩(wěn)定為一行三列式布局。

優(yōu)點：

1、清晰展現各入口

2、容易記住各入口位置，方便快速查找

不足：

1、菜單之間的跳轉要回到初始點

2、無法向用戶介紹大概的功能，只能點擊進去才能獲知，初始狀態(tài)不如列表式明朗

3、容易形成更深的路徑

4、不能直接展現入口內容

5、不能顯示太多入口次級內容

場景：

適合入口比較多的展示，而且導航之間切換不是很頻繁的情況，也就是業(yè)務之間相對獨立，沒有太多的瓜葛。

4，選項卡式布局

特點：

導航一直存在，具有選中態(tài)，可快速切換到另一個導航。

優(yōu)點：

1、減少界面跳轉的層級

2、分類位置固定

3、清楚當前所在的入口位置

3、輕松在各入口間頻繁跳轉且不會迷失方向

4、直接展現最重要入口的內容信息

不足：

功能入口過多時，該模式顯得笨重不實用

場景：

大部分放在底部，方便用戶操作，切換的時候，選中狀態(tài)高亮顯示，有少數放在頂部。適合分類少及其內容同時展示，導航菜單項數量為3-5個；各導航菜單項之間內容/功能有顯著差異；用戶在各個導航選項之間需要非常頻繁的切換操作

5，輪播圖式布局

特點：

重點展示一個對象，通過手勢滑動按順序查看更多

優(yōu)點：

1、單頁面內容整體性強，聚焦度高

2、線性的瀏覽方式有順暢感、方向感

不足：

1、受屏幕寬度限制，它可顯示的數量較少，需要用戶進行主動探索

2、由于各頁面內容結構相似，容易忽略后面的內容

3、不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面

場景：

適合數量少，聚焦度高，視覺沖擊力強的圖片展示

6，伸展式布局

特點：

能在一屏內顯示更多的細節(jié)，無需頁面的跳轉

優(yōu)點：

1、減少界面跳轉的層級

2、對分類有整體性的了解

3、清楚當前所在的入口位置

不足：

分類位置不固定，當展開的內容比較多時，跨分類跳轉不方便

場景：

適合分類多及其內容同時展示

內容展示的信息多

7，抽屜式布局

特點：

突出核心功能，隱藏其它功能。

優(yōu)點：

1、不占用寶貴的屏幕空間，讓用戶首先能聚焦于內容

2、導航的菜單項目不受數量限制，應用的所有信息組織入口都可以加入到抽屜導航中

3、擴展性強，配置靈活，一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中

不足：

1、隱藏框架中其他入口、用戶需要一定記憶成本

2、對入口交互的功能可見性要求高

3、容易與應用內的其他交互模式沖突，比如側滑手勢操作

場景：

適合功能較多，信息結構較復雜的產品，用戶的注意力聚焦在主信息流的瀏覽上，不用頻繁切換“子產品模塊”，且擴展性比較好

8，彈出框式布局

特點：

沒有跳出感，適合內容比較少和簡單操作的呈現。

優(yōu)點：

1、在原有界面上進行操作，不必跳出界面，體驗比較連貫

2、在用戶需要的時候才顯示（重要提示除外），不主動干擾

不足：

1、顯示的內容有限

場景：

適合內容較少的顯示

9，橫向拓展式布局

特點：

節(jié)省空間，可使用箭頭，圓點或顯示不全的圖片告訴用戶還有更多的內容可查看。

優(yōu)點：

1、查看更多內容不必跳出界面，體驗連貫。

2、節(jié)省空間。

不足：

橫屏寬度有限，更多的內容有數量上限制。

場景：

適合圖片或信息組塊更多的展示方式。

10、多面板式布局

特點：

能同時呈現比較多的分類及內容。

優(yōu)點：

1、減少界面跳轉的層級

2、對分類有整體性的了解

3、分類位置固定

4、清楚當前所在的入口位置

不足：

1、界面比較擁擠

場景：

適合分類多及其內容同時展示

內容展示的信息不多

以上都是基本布局，在實際的設計中，我們需要結合具體的數據結構特點選用合適的布局，把不同的布局像搭積木一樣組合起來完成復雜的界面設計，要考慮信息結構、重要層次以及數量上的差異，提供最適合的布局，以增加產品的易用性和交互體驗。

二、如何定義UI設計視覺規(guī)范

圖標規(guī)范

很多設計師以為UI設計

就是設計圖標。雖然事實并非如此，但圖標的設計在整個UI設計中是比較基礎的一個環(huán)節(jié)。

圖標與品牌標志一樣，在設計時都需要做適當的減法，應該盡量用簡約的線條去表達其含義，應該盡量避免出現線條結構過于復雜的設計，而且整體的圖標都需要保持風格一致，例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格等等。

UI設計師應該知道的UI設計規(guī)范

特別是對于新人，所以大家一起來看看圖標設計的規(guī)范吧：

(1)像素對齊

需要嚴格的做到像素對齊，尤其是在做較小尺寸的圖標時，如果不嚴格的遵循像素對齊，那最終的顯示效果就會出現問題。

(2)多用布爾運算

在做圖標的時候，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆，這樣做的好處有如下幾點：

·讓你的圖標更加規(guī)范

·對圖形結構理解更加深刻

·后期更改形狀更加方便

UI設計師應該知道的UI設計規(guī)范

(3)獨特的風格

在做系列圖標的時候，一定要在前期給圖標設定一個風格及原則，使之看起來與眾不同。

在這里值得一提就是，我們在做線性圖標時，一定要保證描邊粗細相同、圓角相同，如果這些基礎的規(guī)則都沒有遵循，那也就談不上風格的統一、創(chuàng)新了。

(4)視覺大小統一

在進行圖標設計的時候，我們會使用柵格輔助線來幫助我們更加嚴格謹慎，但一定不要被輔助線困住，學會靈活運用，保持視覺上的大小統一。

三、32個實用酷炫的Android開源UI框架

1.Side-Menu.Android

分類側滑菜單 ， Yalantis 出品。

項目地址： https://github.com/Yalantis/Side-Menu.Android

2.Context-Menu.Android

可以方便快速集成漂亮帶有動畫效果的上下文菜單， Yalantis 出品。

項目地址： https://github.com/Yalantis/Context-Menu.Android

3.Pull-to-Refresh.Rentals-Android

提供一個簡單可以自定義的 下拉刷新 實現，Yalantis 出品。

項目地址： https://github.com/Yalantis/Pull-to-Refresh.Rentals-Android

4.Titanic

可以顯示水位上升下降的TextView

項目地址： https://github.com/RomainPiel/Titanic

5.AndroidSwipeLayout

滑動Layout ，支持單個View，ListView，GridView

項目地址： https://github.com/daimajia/AndroidSwipeLayout

Demo地址： Download Demo

6.Android Typeface Helper

可以幫你輕松實現自定義字體的庫

項目地址： https://github.com/norbsoft/android-typeface-helper

7.android-lockpattern

Android的圖案密碼解鎖

項目地址： https://code.google.com/p/android-lockpattern/

Demo地址： https://play.google.com/store/apps/details?id=group.pals.android.lib.ui.lockpattern.demo

文檔介紹： https://code.google.com/p/android-lockpattern/wiki/QuickUse

APP示例：Android開機的圖案密碼解鎖，支付寶的密碼解鎖

8.ToggleButton

狀態(tài)切換的 Button，類似 iOS，用 View 實現

項目地址： https://github.com/zcweng/ToggleButton

9.WilliamChart

繪制圖表的庫，支持LineChartView、BarChartView和StackBarChartView三中圖表類型，并且支持 Android 2.2及以上的系統。

項目地址： https://github.com/diogobernardino/WilliamChart

Demo地址： https://play.google.com/store/apps/details?id=com.db.williamchartdemo

Demo項目： https://github.com/diogobernardino/WilliamChart/tree/master/sample

10.實現滑動ViewPager漸變背景色

項目地址： https://github.com/TaurusXi/GuideBackgroundColorAnimation

11.Euclid

用戶簡歷界面， Yalantis 出品。

項目地址： https://github.com/Yalantis/Euclid

12. InstaMaterial

Instagram的一組Material 風格的概念設計

項目地址： https://github.com/frogermcs/InstaMaterial

13. SpringIndicator

使用bezier實現粘連效果的頁面指示

項目地址： https://github.com/chenupt/SpringIndicator

14. BezierDemo

仿qq消息氣泡拖拽 消失的效果。

項目地址： https://github.com/chenupt/BezierDemo

15. FoldableLayout

折疊的信紙被打開一樣的動畫效果

項目地址： https://github.com/alexvasilkov/FoldableLayout

16.Taurus

下拉刷新，Yalantis 出品。（是不是有點似曾相識呢？）

項目地址： https://github.com/Yalantis/Taurus

17. PersistentSearch

在點擊搜索的時候控件在原有位置顯示輸入框。

項目地址： https://github.com/Quinny898/PersistentSearch

18. circular-progress-button

帶進度顯示的Button

項目地址： https://github.com/dmytrodanylyk/circular-progress-button

19. discrollview

當上下滾動的時候子元素會呈現不同動畫效果的scrollView，網頁上稱之為：視差滾動

項目地址： https://github.com/flavienlaurent/discrollview

20. sweet-alert-dialog

一個帶動畫效果的 自定義對話框樣式

項目地址： https://github.com/pedant/sweet-alert-dialog

21. android-floating-action-button

Material Desig風格的 浮動操作按鈕

項目地址： https://github.com/futuresimple/android-floating-action-button

22. android-collapse-calendar-view

可以在月視圖與周視圖之間切換的calendar控件

項目地址： https://github.com/blazsolar/android-collapse-calendar-view

22. android-collapse-calendar-view

可以在月視圖與周視圖之間切換的calendar控件

項目地址： https://github.com/blazsolar/android-collapse-calendar-view

23. NumberProgressBar

個簡約性感的數字進度條

項目地址： https://github.com/daimajia/NumberProgressBar

24. CircularProgressView

CircularProgressView 是通過自定義view的方式實現的Material風格的加載提示控件，兼容任何版本。

項目地址： https://github.com/rahatarmanahmed/CircularProgressView

25. OriSim3D-Android

opengl 實現了各種折紙效果，模擬了從一張紙折疊成一條船的整個過程

項目地址： https://github.com/RemiKoutcherawy/OriSim3D-Android

26、萬能日歷控件:CalendarView

GitHub: https://github.com/huanghaibin-dev/CalendarView

中文使用文檔: https://github.com/huanghaibin-dev/CalendarView/blob/master/QUESTION_ZH.md

27、大圖查看器： BigImage ImageView ViewPager

Github: https://github.com/SherlockGougou/BigImageViewPager

地址： https://www.jianshu.com/p/b15e65791c3f

支持超長圖、超大圖的圖片瀏覽器，優(yōu)化內存，支持手勢放大、下拉關閉、查看原圖、加載百分比、保存圖片等功能?，F已支持androidx。

28、安卓工具包androidUntilCode(安卓必備)

Github: https://github.com/Blankj/AndroidUtilCode/blob/master/lib/utilcode/README-CN.md

29、萬能適配器-BRAVH

官網: http://www.recyclerview.org

GitHub: https://github.com/CymChad/BaseRecyclerViewAdapterHelper

RecyclerView

作為Android最常用的控件之一，是否常常為“她”操碎了心

BRVAH受益群體是所有Android開發(fā)者，希望更多開發(fā)者能夠一起來把這個項目做得更好幫助更多人

30、智能刷新控件--SmartRefreshLayout

GitHub: https://github.com/scwang90/SmartRefreshLayout

中文: https://gitee.com/scwang90/SmartRefreshLayout

SmartRefreshLayout以打造一個強大，穩(wěn)定，成熟的下拉刷新框架為目標，并集成各種的炫酷、多樣、實用、美觀的Header和Footer。 正如名字所說，SmartRefreshLayout是一個“聰明”或者“智能”的下拉刷新布局，由于它的“智能”，它不只是支持所有的View，還支持多層嵌套的視圖結構。 它繼承自ViewGroup 而不是FrameLayout或LinearLayout，提高了性能。 也吸取了現在流行的各種刷新布局的優(yōu)點，包括谷歌官方的 SwipeRefreshLayout ， 其他第三方的 Ultra-Pull-To-Refresh 、 TwinklingRefreshLayout 。 還集成了各種炫酷的 Header 和 Footer。

31、內存泄漏檢測工具--leakcanary

使用方式: https://www.jianshu.com/p/b83ddffcb3b5

LeakCanary是Square公司基于MAT開源的一個工具，用來檢測Android App中的內存泄露問題。官方地址： https://github.com/square/leakcanary

32、 1218683832 / AndroidSlidingUpPanel

SlidingUpPanelLayout：可以上下滑動的菜單布

https://github.com/1218683832/AndroidSlidingUpPanel

四、UI設計網頁設計字體規(guī)范應該要注意什么

可以參考常規(guī)字體的使用規(guī)范：

1、在每個項目設計中只使用1-2個字體樣式，而在品牌字有明確的規(guī)范的情況下，只需要一種字體貫穿全文，通過對字體放大來強調重點文案。字體用的太多，越顯得不夠專業(yè)。

2、不同的樣式的字體，形狀或系列最好相同，保證字體風格的一致性。

3、字體與背景的層次要分明,確保字體樣式與色調氣氛相匹配，等。

擴展資料：

網頁設計

1、需要根據消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，從而建立起營銷模型。

2、以業(yè)務目標為中心進行功能策劃，制作出欄目結構關系圖。

3、以滿足用戶體驗設計為目標，使用axure rp或同類軟件進行頁面策劃，制作出交互用例。

4、以頁面精美化設計為目標，使用PS、AI等軟件，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

5、根據用戶反饋，進行頁面設計調整，以達到最優(yōu)效果。

參考資料來源：百度百科-UI設計

參考資料來源：百度百科-網頁設計 （網站技術）

以上就是小編對于常見ui設計規(guī)范的框架結構問題和相關問題的解答了，如有疑問，可撥打網站上的電話，或添加微信。

推薦閱讀：

顧客提問的問題100條（銷售中常見的20個問題）

抖音運營常見問題匯總（抖音運營常見問題及解決辦法）

市場營銷4種常見的促銷方式（促銷策略的四種方式）

杭州衛(wèi)衣批發(fā)工廠（杭州衛(wèi)衣批發(fā)工廠地址）

杭州視頻（杭州視頻剪輯招聘）