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