-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專題列表 > 正文
常見ui設(shè)計(jì)規(guī)范的框架結(jié)構(gòu)（常見ui設(shè)計(jì)規(guī)范的框架結(jié)構(gòu)包括）
發(fā)布時(shí)間：2023-04-11 16:40:22
稿源：
創(chuàng)意嶺 閱讀：
92
大家好！今天讓小編來大家介紹下關(guān)于常見ui設(shè)計(jì)規(guī)范的框架結(jié)構(gòu)的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008
文章目錄列表:
計(jì)規(guī)范的框架結(jié)構(gòu)（常見ui設(shè)計(jì)規(guī)范的框架結(jié)構(gòu)包括）.jpg)
一、移動(dòng)端幾種常見的界面設(shè)計(jì)布局
這里我畫了幾種移動(dòng)端常見的頁面布局和他們的各自特點(diǎn)：
1，列表式布局
2，陳列式布局
3，九宮格式布局
4，選項(xiàng)卡式布局
5，輪播圖式布局
6，伸展式布局
7，抽屜式布局
8，彈出框式布局
9，橫向拓展式布局
10、多面板式布局
1，列表式布局
特點(diǎn)：
內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)。
優(yōu)點(diǎn)：
1、層次展示清晰
2、視覺流線從上向下，瀏覽體驗(yàn)快捷
3、可展示內(nèi)容較長(zhǎng)的菜單或擁有次級(jí)文字內(nèi)容的標(biāo)題
不足：
1、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點(diǎn)
2、同級(jí)內(nèi)容過多時(shí)，用戶瀏覽容易產(chǎn)生疲勞
3、排版靈活性不是很高
4、只能通過排列順序、顏色來區(qū)分各入口重要程度
場(chǎng)景：
列表菜單適合用來顯示平級(jí)菜單，且較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題
2，陳列式布局
特點(diǎn)：
布局比較靈活，設(shè)計(jì)師可以平均分布這些網(wǎng)絡(luò)，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對(duì)列表式，其優(yōu)點(diǎn)在于同樣的高度下可放置更多的菜單，更具有流動(dòng)性，曝布流就屬于其中一種。
優(yōu)點(diǎn)：
1、直觀展現(xiàn)各項(xiàng)內(nèi)容
2、方便瀏覽經(jīng)常更新的內(nèi)容
不足：
1、不適合展現(xiàn)頂層入口框架
2、容易形成界面內(nèi)容過多，顯得雜亂
3、設(shè)計(jì)效果容易呆板
場(chǎng)景：
適合以圖片為主的單一內(nèi)容瀏覽型的展示
3，九宮格式布局
特點(diǎn)：
相比陳列館式，布局比較穩(wěn)定為一行三列式布局。
優(yōu)點(diǎn)：
1、清晰展現(xiàn)各入口
2、容易記住各入口位置，方便快速查找
不足：
1、菜單之間的跳轉(zhuǎn)要回到初始點(diǎn)
2、無法向用戶介紹大概的功能，只能點(diǎn)擊進(jìn)去才能獲知，初始狀態(tài)不如列表式明朗
3、容易形成更深的路徑
4、不能直接展現(xiàn)入口內(nèi)容
5、不能顯示太多入口次級(jí)內(nèi)容
場(chǎng)景：
適合入口比較多的展示，而且導(dǎo)航之間切換不是很頻繁的情況，也就是業(yè)務(wù)之間相對(duì)獨(dú)立，沒有太多的瓜葛。
4，選項(xiàng)卡式布局
特點(diǎn)：
導(dǎo)航一直存在，具有選中態(tài)，可快速切換到另一個(gè)導(dǎo)航。
優(yōu)點(diǎn)：
1、減少界面跳轉(zhuǎn)的層級(jí)
2、分類位置固定
3、清楚當(dāng)前所在的入口位置
3、輕松在各入口間頻繁跳轉(zhuǎn)且不會(huì)迷失方向
4、直接展現(xiàn)最重要入口的內(nèi)容信息
不足：
功能入口過多時(shí)，該模式顯得笨重不實(shí)用
場(chǎng)景：
大部分放在底部，方便用戶操作，切換的時(shí)候，選中狀態(tài)高亮顯示，有少數(shù)放在頂部。適合分類少及其內(nèi)容同時(shí)展示，導(dǎo)航菜單項(xiàng)數(shù)量為3-5個(gè)；各導(dǎo)航菜單項(xiàng)之間內(nèi)容/功能有顯著差異；用戶在各個(gè)導(dǎo)航選項(xiàng)之間需要非常頻繁的切換操作
5，輪播圖式布局
特點(diǎn)：
重點(diǎn)展示一個(gè)對(duì)象，通過手勢(shì)滑動(dòng)按順序查看更多
優(yōu)點(diǎn)：
1、單頁面內(nèi)容整體性強(qiáng)，聚焦度高
2、線性的瀏覽方式有順暢感、方向感
不足：
1、受屏幕寬度限制，它可顯示的數(shù)量較少，需要用戶進(jìn)行主動(dòng)探索
2、由于各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容
3、不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面
場(chǎng)景：
適合數(shù)量少，聚焦度高，視覺沖擊力強(qiáng)的圖片展示
6，伸展式布局
特點(diǎn)：
能在一屏內(nèi)顯示更多的細(xì)節(jié)，無需頁面的跳轉(zhuǎn)
優(yōu)點(diǎn)：
1、減少界面跳轉(zhuǎn)的層級(jí)
2、對(duì)分類有整體性的了解
3、清楚當(dāng)前所在的入口位置
不足：
分類位置不固定，當(dāng)展開的內(nèi)容比較多時(shí)，跨分類跳轉(zhuǎn)不方便
場(chǎng)景：
適合分類多及其內(nèi)容同時(shí)展示
內(nèi)容展示的信息多
7，抽屜式布局
特點(diǎn)：
突出核心功能，隱藏其它功能。
優(yōu)點(diǎn)：
1、不占用寶貴的屏幕空間，讓用戶首先能聚焦于內(nèi)容
2、導(dǎo)航的菜單項(xiàng)目不受數(shù)量限制，應(yīng)用的所有信息組織入口都可以加入到抽屜導(dǎo)航中
3、擴(kuò)展性強(qiáng)，配置靈活，一些常用的快捷操作功能和低層級(jí)界面入口也能直接放置進(jìn)抽屜導(dǎo)航中
不足：
1、隱藏框架中其他入口、用戶需要一定記憶成本
2、對(duì)入口交互的功能可見性要求高
3、容易與應(yīng)用內(nèi)的其他交互模式?jīng)_突，比如側(cè)滑手勢(shì)操作
場(chǎng)景：
適合功能較多，信息結(jié)構(gòu)較復(fù)雜的產(chǎn)品，用戶的注意力聚焦在主信息流的瀏覽上，不用頻繁切換“子產(chǎn)品模塊”，且擴(kuò)展性比較好
8，彈出框式布局
特點(diǎn)：
沒有跳出感，適合內(nèi)容比較少和簡(jiǎn)單操作的呈現(xiàn)。
優(yōu)點(diǎn)：
1、在原有界面上進(jìn)行操作，不必跳出界面，體驗(yàn)比較連貫
2、在用戶需要的時(shí)候才顯示（重要提示除外），不主動(dòng)干擾
不足：
1、顯示的內(nèi)容有限
場(chǎng)景：
適合內(nèi)容較少的顯示
9，橫向拓展式布局
特點(diǎn)：
節(jié)省空間，可使用箭頭，圓點(diǎn)或顯示不全的圖片告訴用戶還有更多的內(nèi)容可查看。
優(yōu)點(diǎn)：
1、查看更多內(nèi)容不必跳出界面，體驗(yàn)連貫。
2、節(jié)省空間。
不足：
橫屏寬度有限，更多的內(nèi)容有數(shù)量上限制。
場(chǎng)景：
適合圖片或信息組塊更多的展示方式。
10、多面板式布局
特點(diǎn)：
能同時(shí)呈現(xiàn)比較多的分類及內(nèi)容。
優(yōu)點(diǎn)：
1、減少界面跳轉(zhuǎn)的層級(jí)
2、對(duì)分類有整體性的了解
3、分類位置固定
4、清楚當(dāng)前所在的入口位置
不足：
1、界面比較擁擠
場(chǎng)景：
適合分類多及其內(nèi)容同時(shí)展示
內(nèi)容展示的信息不多
以上都是基本布局，在實(shí)際的設(shè)計(jì)中，我們需要結(jié)合具體的數(shù)據(jù)結(jié)構(gòu)特點(diǎn)選用合適的布局，把不同的布局像搭積木一樣組合起來完成復(fù)雜的界面設(shè)計(jì)，要考慮信息結(jié)構(gòu)、重要層次以及數(shù)量上的差異，提供最適合的布局，以增加產(chǎn)品的易用性和交互體驗(yàn)。
二、如何定義UI設(shè)計(jì)視覺規(guī)范
圖標(biāo)規(guī)范
很多設(shè)計(jì)師以為UI設(shè)計(jì)
就是設(shè)計(jì)圖標(biāo)。雖然事實(shí)并非如此，但圖標(biāo)的設(shè)計(jì)在整個(gè)UI設(shè)計(jì)中是比較基礎(chǔ)的一個(gè)環(huán)節(jié)。
圖標(biāo)與品牌標(biāo)志一樣，在設(shè)計(jì)時(shí)都需要做適當(dāng)?shù)臏p法，應(yīng)該盡量用簡(jiǎn)約的線條去表達(dá)其含義，應(yīng)該盡量避免出現(xiàn)線條結(jié)構(gòu)過于復(fù)雜的設(shè)計(jì)，而且整體的圖標(biāo)都需要保持風(fēng)格一致，例如圖標(biāo)的線條粗細(xì)、邊角弧度、圖標(biāo)高度寬度比例、風(fēng)格等等。
UI設(shè)計(jì)師應(yīng)該知道的UI設(shè)計(jì)規(guī)范
特別是對(duì)于新人，所以大家一起來看看圖標(biāo)設(shè)計(jì)的規(guī)范吧：
(1)像素對(duì)齊
需要嚴(yán)格的做到像素對(duì)齊，尤其是在做較小尺寸的圖標(biāo)時(shí)，如果不嚴(yán)格的遵循像素對(duì)齊，那最終的顯示效果就會(huì)出現(xiàn)問題。
(2)多用布爾運(yùn)算
在做圖標(biāo)的時(shí)候，能用基本圖形進(jìn)行布爾運(yùn)算的時(shí)候，盡量不要使用鋼筆，這樣做的好處有如下幾點(diǎn)：
·讓你的圖標(biāo)更加規(guī)范
·對(duì)圖形結(jié)構(gòu)理解更加深刻
·后期更改形狀更加方便
UI設(shè)計(jì)師應(yīng)該知道的UI設(shè)計(jì)規(guī)范
(3)獨(dú)特的風(fēng)格
在做系列圖標(biāo)的時(shí)候，一定要在前期給圖標(biāo)設(shè)定一個(gè)風(fēng)格及原則，使之看起來與眾不同。
在這里值得一提就是，我們?cè)谧鼍€性圖標(biāo)時(shí)，一定要保證描邊粗細(xì)相同、圓角相同，如果這些基礎(chǔ)的規(guī)則都沒有遵循，那也就談不上風(fēng)格的統(tǒng)一、創(chuàng)新了。
(4)視覺大小統(tǒng)一
在進(jìn)行圖標(biāo)設(shè)計(jì)的時(shí)候，我們會(huì)使用柵格輔助線來幫助我們更加嚴(yán)格謹(jǐn)慎，但一定不要被輔助線困住，學(xué)會(huì)靈活運(yùn)用，保持視覺上的大小統(tǒng)一。
三、32個(gè)實(shí)用酷炫的Android開源UI框架
1.Side-Menu.Android
分類側(cè)滑菜單 ， Yalantis 出品。
項(xiàng)目地址： https://github.com/Yalantis/Side-Menu.Android
2.Context-Menu.Android
可以方便快速集成漂亮帶有動(dòng)畫效果的上下文菜單， Yalantis 出品。
項(xiàng)目地址： https://github.com/Yalantis/Context-Menu.Android
3.Pull-to-Refresh.Rentals-Android
提供一個(gè)簡(jiǎn)單可以自定義的 下拉刷新 實(shí)現(xiàn)，Yalantis 出品。
項(xiàng)目地址： https://github.com/Yalantis/Pull-to-Refresh.Rentals-Android
4.Titanic
可以顯示水位上升下降的TextView
項(xiàng)目地址： https://github.com/RomainPiel/Titanic
5.AndroidSwipeLayout
滑動(dòng)Layout ，支持單個(gè)View，ListView，GridView
項(xiàng)目地址： https://github.com/daimajia/AndroidSwipeLayout
Demo地址： Download Demo
6.Android Typeface Helper
可以幫你輕松實(shí)現(xiàn)自定義字體的庫
項(xiàng)目地址： https://github.com/norbsoft/android-typeface-helper
7.android-lockpattern
Android的圖案密碼解鎖
項(xiàng)目地址： 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開機(jī)的圖案密碼解鎖，支付寶的密碼解鎖
8.ToggleButton
狀態(tài)切換的 Button，類似 iOS，用 View 實(shí)現(xiàn)
項(xiàng)目地址： https://github.com/zcweng/ToggleButton
9.WilliamChart
繪制圖表的庫，支持LineChartView、BarChartView和StackBarChartView三中圖表類型，并且支持 Android 2.2及以上的系統(tǒng)。
項(xiàng)目地址： https://github.com/diogobernardino/WilliamChart
Demo地址： https://play.google.com/store/apps/details?id=com.db.williamchartdemo
Demo項(xiàng)目： https://github.com/diogobernardino/WilliamChart/tree/master/sample
10.實(shí)現(xiàn)滑動(dòng)ViewPager漸變背景色
項(xiàng)目地址： https://github.com/TaurusXi/GuideBackgroundColorAnimation
11.Euclid
用戶簡(jiǎn)歷界面， Yalantis 出品。
項(xiàng)目地址： https://github.com/Yalantis/Euclid
12. InstaMaterial
Instagram的一組Material 風(fēng)格的概念設(shè)計(jì)
項(xiàng)目地址： https://github.com/frogermcs/InstaMaterial
13. SpringIndicator
使用bezier實(shí)現(xiàn)粘連效果的頁面指示
項(xiàng)目地址： https://github.com/chenupt/SpringIndicator
14. BezierDemo
仿qq消息氣泡拖拽 消失的效果。
項(xiàng)目地址： https://github.com/chenupt/BezierDemo
15. FoldableLayout
折疊的信紙被打開一樣的動(dòng)畫效果
項(xiàng)目地址： https://github.com/alexvasilkov/FoldableLayout
16.Taurus
下拉刷新，Yalantis 出品。（是不是有點(diǎn)似曾相識(shí)呢？）
項(xiàng)目地址： https://github.com/Yalantis/Taurus
17. PersistentSearch
在點(diǎn)擊搜索的時(shí)候控件在原有位置顯示輸入框。
項(xiàng)目地址： https://github.com/Quinny898/PersistentSearch
18. circular-progress-button
帶進(jìn)度顯示的Button
項(xiàng)目地址： https://github.com/dmytrodanylyk/circular-progress-button
19. discrollview
當(dāng)上下滾動(dòng)的時(shí)候子元素會(huì)呈現(xiàn)不同動(dòng)畫效果的scrollView，網(wǎng)頁上稱之為：視差滾動(dòng)
項(xiàng)目地址： https://github.com/flavienlaurent/discrollview
20. sweet-alert-dialog
一個(gè)帶動(dòng)畫效果的 自定義對(duì)話框樣式
項(xiàng)目地址： https://github.com/pedant/sweet-alert-dialog
21. android-floating-action-button
Material Desig風(fēng)格的 浮動(dòng)操作按鈕
項(xiàng)目地址： https://github.com/futuresimple/android-floating-action-button
22. android-collapse-calendar-view
可以在月視圖與周視圖之間切換的calendar控件
項(xiàng)目地址： https://github.com/blazsolar/android-collapse-calendar-view
22. android-collapse-calendar-view
可以在月視圖與周視圖之間切換的calendar控件
項(xiàng)目地址： https://github.com/blazsolar/android-collapse-calendar-view
23. NumberProgressBar
個(gè)簡(jiǎn)約性感的數(shù)字進(jìn)度條
項(xiàng)目地址： https://github.com/daimajia/NumberProgressBar
24. CircularProgressView
CircularProgressView 是通過自定義view的方式實(shí)現(xiàn)的Material風(fēng)格的加載提示控件，兼容任何版本。
項(xiàng)目地址： https://github.com/rahatarmanahmed/CircularProgressView
25. OriSim3D-Android
opengl 實(shí)現(xiàn)了各種折紙效果，模擬了從一張紙折疊成一條船的整個(gè)過程
項(xiàng)目地址： 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
支持超長(zhǎng)圖、超大圖的圖片瀏覽器，優(yōu)化內(nèi)存，支持手勢(shì)放大、下拉關(guān)閉、查看原圖、加載百分比、保存圖片等功能?，F(xiàn)已支持androidx。
28、安卓工具包androidUntilCode(安卓必備)
Github: https://github.com/Blankj/AndroidUtilCode/blob/master/lib/utilcode/README-CN.md
29、萬能適配器-BRAVH
官網(wǎng): http://www.recyclerview.org
GitHub: https://github.com/CymChad/BaseRecyclerViewAdapterHelper
RecyclerView
作為Android最常用的控件之一，是否常常為“她”操碎了心
BRVAH受益群體是所有Android開發(fā)者，希望更多開發(fā)者能夠一起來把這個(gè)項(xiàng)目做得更好幫助更多人
30、智能刷新控件--SmartRefreshLayout
GitHub: https://github.com/scwang90/SmartRefreshLayout
中文: https://gitee.com/scwang90/SmartRefreshLayout
SmartRefreshLayout以打造一個(gè)強(qiáng)大，穩(wěn)定，成熟的下拉刷新框架為目標(biāo)，并集成各種的炫酷、多樣、實(shí)用、美觀的Header和Footer。 正如名字所說，SmartRefreshLayout是一個(gè)“聰明”或者“智能”的下拉刷新布局，由于它的“智能”，它不只是支持所有的View，還支持多層嵌套的視圖結(jié)構(gòu)。 它繼承自ViewGroup 而不是FrameLayout或LinearLayout，提高了性能。 也吸取了現(xiàn)在流行的各種刷新布局的優(yōu)點(diǎn)，包括谷歌官方的 SwipeRefreshLayout ， 其他第三方的 Ultra-Pull-To-Refresh 、 TwinklingRefreshLayout 。 還集成了各種炫酷的 Header 和 Footer。
31、內(nèi)存泄漏檢測(cè)工具--leakcanary
使用方式: https://www.jianshu.com/p/b83ddffcb3b5
LeakCanary是Square公司基于MAT開源的一個(gè)工具，用來檢測(cè)Android App中的內(nèi)存泄露問題。官方地址： https://github.com/square/leakcanary
32、 1218683832 / AndroidSlidingUpPanel
SlidingUpPanelLayout：可以上下滑動(dòng)的菜單布
https://github.com/1218683832/AndroidSlidingUpPanel
四、UI設(shè)計(jì)網(wǎng)頁設(shè)計(jì)字體規(guī)范應(yīng)該要注意什么
可以參考常規(guī)字體的使用規(guī)范：
1、在每個(gè)項(xiàng)目設(shè)計(jì)中只使用1-2個(gè)字體樣式，而在品牌字有明確的規(guī)范的情況下，只需要一種字體貫穿全文，通過對(duì)字體放大來強(qiáng)調(diào)重點(diǎn)文案。字體用的太多，越顯得不夠?qū)I(yè)。
2、不同的樣式的字體，形狀或系列最好相同，保證字體風(fēng)格的一致性。
3、字體與背景的層次要分明,確保字體樣式與色調(diào)氣氛相匹配，等。
擴(kuò)展資料：
網(wǎng)頁設(shè)計(jì)
1、需要根據(jù)消費(fèi)者的需求、市場(chǎng)的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，從而建立起營(yíng)銷模型。
2、以業(yè)務(wù)目標(biāo)為中心進(jìn)行功能策劃，制作出欄目結(jié)構(gòu)關(guān)系圖。
3、以滿足用戶體驗(yàn)設(shè)計(jì)為目標(biāo)，使用axure rp或同類軟件進(jìn)行頁面策劃，制作出交互用例。
4、以頁面精美化設(shè)計(jì)為目標(biāo)，使用PS、AI等軟件，調(diào)整，使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)美化。
5、根據(jù)用戶反饋，進(jìn)行頁面設(shè)計(jì)調(diào)整，以達(dá)到最優(yōu)效果。
參考資料來源：百度百科-UI設(shè)計(jì)
參考資料來源：百度百科-網(wǎng)頁設(shè)計(jì) （網(wǎng)站技術(shù)）
以上就是小編對(duì)于常見ui設(shè)計(jì)規(guī)范的框架結(jié)構(gòu)問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。
推薦閱讀：
抖音運(yùn)營(yíng)常見問題匯總（抖音運(yùn)營(yíng)常見問題及解決辦法）
市場(chǎng)營(yíng)銷4種常見的促銷方式（促銷策略的四種方式）
杭州衛(wèi)衣批發(fā)工廠（杭州衛(wèi)衣批發(fā)工廠地址）
贛公網(wǎng)安備 50019002502384號(hào)
