追求卓越一諾千金

藍藍設計||新乡爱情网,2011年成立_文亨利,主創清華團隊||_梁笙和沈言 卫生间,專注軟件和互聯網ui設計開發-|-丝诺萄官网。擅長企業信息化管理|-_长城哈弗h6车友会、監控|--泡沫坊、大數據軟件UIUE谘詢和設計開發服務|芜湖地税局。立足UI-248彩票怎么注册,好好學習__038彩票平台,天天進步--160彩票!


畫底部tab圖標不知道用麵性還是線性__one x升级hboot?

2019-5-16 分享達人 設計思維


如果您想訂閱本博客內容__2018彩票信誉平台,每天自動發到您的郵箱中-|_电视剧热爱, 請點這裏

我們都知道UI設計並不僅僅是做出好看的東西-_-2628彩票网页,還涉及到交互和數據還有轉化率_|_青岛地下排水系统,就像是設計師通過界麵在於用戶交流一樣-|长寿益民网,而底部導航欄就是交流對話中的一個|_|苍井空作品 百度云。因為如果用戶連他們在產品的哪裏都不知道|_全球通m值兑换话费,那麼我們的設計再好優秀也是沒用的-|甜妞追逃夫。



底部導航欄的用法


底部導航欄在屏幕底端展示3至5個目標選項||致哀 志哀,每一個選項由一個圖標和文字標簽展示--促其反正,點擊底部導航圖標時||_云顶平台是真是假,將帶領用戶前往與之關聯的視圖_|诺基亚6122。


這裏將目標選項放在底部的原因是_|日升丰,在手持的移動設備上容易被觸及|_高三毕业寄语,符合拇指定律_038彩票可靠吗?,方便用戶單手操作|000712。




底部導航欄的展示


根據我的觀察_--阳泉二中贴吧,底部導航欄的表現形式一般分為三種-|闪闪宝石,首先我們先來說第一種|destinywarfare:

1-_青岛市公交线路图、文字+圖標

大部分的平台都是使用的扁平風格--|法网奖金,隻有在節假日的時候才會出現||阳城县人力资源和社会保障局,而多數情況下-|许镇耀微博,我們常見的底部導航欄都是以文字+圖標的形式出現-|-云顶至尊户型图,在選中的狀態下--永胜国际app是什么,設計師也會根據對整體風格的把控和產品調性_|我们约会吧李飒,增加一些變化和趣味|--卜冰,來突出產品的風格|_|13彩票软件app。如下圖所示---灵宝党政网:


全名K歌和知乎的底部導航欄就是使用文字加圖標的形式--_白看网络电视,其中全名K歌的底部圖標增加了一些有趣的變化--|盈彩娱乐是骗局吗,讓底部圖標變得更有趣-金韵蓉博客,同時文字的存在能夠更好的讓用戶對圖標進行理解_比亚迪f5报价,提高用戶識別效率-_女烈受刑专辑。


2___盈彩网官方、文字

文字按鈕目前來說產品裏使用的也是比較多的_--雪碧真我篮球,大多出現在以圖片和視頻為主的產品和界麵中|168彩票pk10提现没到账,如下圖所示|买什么车性价比高:


抖音--雅虎 翻译、美圖秀秀-_-金奎丽、小紅書||_苏州哪里有洗头房,這三款APP的底部導航欄都是文字作為模塊切分--_26岁毒贩获死刑,在使用的過程中|--火腿肠怎么做好吃,更能夠關注與閱讀內容-_中央六套节目表,底部操作欄視覺層級相比上麵的那種層級比較低|_成年人身份证,不影響瀏覽視覺-||雨后池塘我的小屋,同時文字按鈕降低了用戶的理解成本||苏州洗头房。


3_|-诺基亚5320刷机、圖標

單圖標按鈕是很少見的_|鱼精蛋白锌胰岛素,很多圖標都沒有很強的識別度||-诺基亚c202,所以僅僅用圖標放在底部操作欄_最好的化妆品排行榜,會造成用戶的認知負擔-_|河北职称信息管理系统,不建議使用獨立的按鈕_|_南华苑路55号。如下圖所示|_索爱w750:


VSCO是一款給用戶推薦產品的APP_尊彩app下载,因此底部操作欄隻有三個按鈕|-谢谢你的温柔mv,從設計的架構和產品的邏輯上來說|_恒大教练,比較有利於用戶對圖標點擊操作-珠江台今日关注重播。


Same的是一款社交的APP__|上海调料市场,有別於目前的大部分產品||金绒飞,它的底部是使用的單圖標的形式苏州文庙,雖然整體界麵比較簡約__-234彩票v100,但是辨識度比較低-3168彩票网,造成了使用產品時的認知負擔|开锁大全。


小總結|_众发彩票官网:

1_|双性人生、當頁麵圖片以圖片為主時__性价比最高笔记本电脑,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的幹擾|_-银通卡怎么用,但是純圖標的底部導航欄降低了用戶的識別度|-英优儿,引起用戶使用時的認知負擔--_苍之涛天书。

2--|色拉油的密度、文字+圖標的搭配屬於最穩妥的方式||-小型玉米深加工项目,適用於大部分的產品底部圖標設計_--我的家乡图画。



底部導航欄圖標的設計


當我們準備做APP底部導航欄設計的時候-|123彩票app,不知道大家有沒有遇到過經常不知道該用麵性還是線性的糾結中-_|亿盈彩票骗局,究竟要選擇哪種對用戶來說才是合適的呢|--金娜娜图片?

大多數的人會覺得是出於個人喜好_-_现任北京市委书记是谁,但是一項名為《麵性圖標vs線性圖標---至尊彩app是正规的吗,對於可用性方麵的影響》的研究表明-|_众彩彩票管家:不同的圖標存在著不同的識別效率-|_航班查询携程,而麵性圖標一般會比線性圖標更快被用戶所識別|-长安新城小学。


1_|-金健米业招聘、特征線索

用戶要辨認圖標依靠的就是特征線索|_|河南四套,如果一個圖標沒有明顯的特征||阳明山攻略,是很難被用戶所識別出來的__-五百次回眸。如下圖所示__宋慧乔谈结婚:



如上圖所示--众彩彩票首页,發現的特征線索是它的眼睛__365天天彩票分快三,沒有眼睛_||肖志恒简历,發現就是個橢圓-_黑帮ceo的筹码情人;目的地的線索特征就是中間的圓--致命弯道5 豆瓣,沒有了中間的圓|_云顶娱乐怎样注册账号,就是個小氣泡|花城广场停车;行程是做成了行李的樣子_-_俗人岛华人,而沒有了行李箱上的特征標誌||掌上永辉下载,就變成了一個很普通的包__河南高等教育自学考试考生服务平台。

所以圖標上的特征線索是用戶識別的關鍵-寒山寺门票,在我們設計圖標的時候-|甜妞追逃夫,一定要確保它包含了用戶識別的線索-索纳塔i40。


2|-星际争霸2人族大讲堂、什麼情況下用線性圖標|||众发娱乐在哪下载?

圖標除了要包含特征線索以外--盈众彩票网址,線性和麵性圖標之間也有區別-|银河国际博彩,當一些圖標的外部特征為它的特征線索時_-霞飞路28,線性圖標會比麵性圖標的識別度來的更為突出|传奇行会霸气名字。


當我們的底部圖標的信息屬於特征線索比較微妙|-|众赢彩票娱乐平台注册,並且出現在邊緣的時候--|至尊时时彩票平台4567,我們可以使用線性圖標-中国青梅产地,或者換個角度來說|永盛国际app是不是骗局,就是當我們選擇底部圖標為線性的表現形式的時候|_-深圳市宝安区基础教育科,在圖標的表現形式上|青岛华东葡萄酒庄园,盡量往形狀的邊緣特征來靠|蒙牛纯牛奶袋装,這樣能夠讓圖標更加突出並且很快被識別|365彩票计划网。


3-沂源一中、什麼情況下用麵性_苏州36路公交车路线?

大多數圖標其實就是將現實生活中的對象變成一個小縮影__|易旺彩票合法,因此麵性剪影的圖標形式認知高於線性圖標|_|视频传输解决方案。



盡管如此|-|小腻腻的博客,用戶還是能夠識別線性圖標_宝安体育馆健身房,但是當圖標的內部空間比較狹窄的時候-_注册申请可以送68彩金,用戶識別線性圖標需要花費更多的時間來識別-_注册送现金的电玩城。

對於內部空間比較擁擠|-|众彩网双色球专家频道,或者線條比較多的圖標_|_焦煤上市公司,最好使用麵性圖標||易点彩票手机版双色球,剪影的表現方式提供了一個更簡潔也更具辨識度的方式|-观心者胡戈伦,從這裏我們可以發現一個事實_-京东商城手机充值,線性圖標的設計表現要求要高於麵性圖標|__范党育原型,因為線性圖標要在具有表現力的同時還需要有很高的識別度|-浠水黑社会,同時不能太過複雜|008彩票论坛!,內部不能過於擁擠-瑞士鹿喜微断食。



劃重點


1---天津洗浴、當頁麵圖片以圖片為主時||陈怡阳台门,使用純文字或者純圖標的能夠降低底部圖標對用戶造成的幹擾|--k722次列车;

2_|角竹光寿猜一成语、文字+圖標的搭配屬於最穩妥的方式巴萨勒沃库森,適用於大部分的產品底部圖標設計|_左旋贝壳。

3|_卓易彩票暂停服务、圖標是由有識別度的特征線索組成的__新密五个人火了照片,而麵性圖標的識別度速度更快_-衬衫包装辅料;

4_-132彩票13mb、線性圖標的內部間距比較寬的時候_|婷婷色,更容易識別-_|4399洛克王国礼包,內部間距比較窄的時候_-晋城五个人图片,使用麵性圖標會更好-|英国欧汇腰椎挺;

5_-闪食网、圖標的特征線索在邊緣的地方||-钩藤茶,使用線性的圖標識別度更高--优博彩票首页。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_-艺术买比,為期望卓越的國內外企業提供卓越的UI界麵設計-|东北二嫂百度云、BS界麵設計 ||北京驱逐外来人口、 cs界麵設計 -让我再抱你一回、 ipad界麵設計 __-金铃子种植、 包裝設計 ||青岛教育局人事处、 圖標定製 |-易福彩票网手机版、 用戶體驗 _|-手机qq2011官方下载正式版免费下载、交互設計-_-小轿车图片、網站建設 -这五个人火了、平麵設計服務_-20l8最新期金牌调解。
標簽: ui設計 « z-index不起作用的大坑 | Vue+Electron下Vuex的Dispatch沒有效果的解決方案»


訂閱Rss