界麵沒層次-|_好看的电影你懂的,到底哪裏出了問題|-说服的艺术?

2019-2-24 分享達人 Bs界麵設計文章及欣賞

如果您想訂閱本博客內容|发型不好的日子,每天自動發到您的郵箱中_-步步高i606主题下载, 請點這裏

剛入行的新手設計師容易出現一個問題_-|盈彩彩票苹果下载,接到需求就開始設計_-亿博彩票是正规平台吗,最後出現的界麵和原型幾乎一模一樣-孝义广电传媒,唯一的區別就是上了色_-intele5300,加了圖片和圖標-|_焦点目标打断宏,最後提交審核時老板反饋|霍州到太原的火车,“這個界麵看上去太“平”了-_魏征进,你在這裏加個背景色吧-|-云顶娱乐怎样注册账号;這個圖標太小_-诺基亚w599,你再放大一點_-消防概念股;這個位置你在加點裝飾……”__-36选7好彩1开奖记录。


這主要原因還是界麵沒層次導致的|-黎巴嫩邮编,雖然老板對設計不太清楚__可调式电热板,但是關於業務邏輯我們的設計稿是否表達清楚_-152彩票靠谱吗,重點是否突出這個他最清楚了_-|言峰绮礼怎么死的。


那麼如何才能提高界麵層次呢_||金寨租房?我們可以從兩個方麵入手--氨糖为何橄固力牌最好,在設計前我們需要考慮突出內容層次的方法-马国贤 杨秀蓉;在設計中需要考慮突出視覺層次的方法---易旺彩票网是真的吗。


目錄


一||f1视频直播、突出內容層次的方法

  • 將相關聯的元素進行組合

  • 確認內容優先級|-|铠甲勇士后传全集,將優先級高的放在前麵

  • 確認重要內容__亿乐彩下载app,將其差異化設計

二_-|高中研究性学习报告、提高視覺層次的方法

  • 利用線_-_诺基亚6700s拆机、麵_|-尊龙新版、留白將模塊進行分割

  • 利用大小|--嘉州房产网、投影|-|镇坪路废弃学校、背景圖突出視覺層次

  • 利用顏色對比提高視覺感受

  • 利用文字對比提高界麵的可閱讀性




一|艺术鉴赏论文、突出內容層次的方法


當一個界麵信息量比較大時__许晋龙,層次感好的界麵用戶進來能快速的獲得想要的信息|_2011年qq下载,同時最終達到產品的目的-||扶风公众信息网。而層次感差的界麵用戶看半天也不知道要做什麼||五菱双排加长小货车,看一會也就走了_-曾潇逸。因此良好的視覺層級是界麵成功的關鍵-_采缇。在設計前我們需要將相關聯的元素進行組合_--闪光夫妇为什么下车;確認內容優先級_-|重庆电视台少儿频道,將優先級高的放在前麵|-|极品公子混在校园;確認重要內容--陈庆之怎么死的,並將其差異化設計-|正版only女装折扣店。

1.將相關聯的元素進行組合

在設計前_-铁木真炒锅,產品原型圖已經將我們的元素進行了分類組合_-_打屁沟,但是他們更多的是考慮邏輯|_女人公敌一共多少集、功能上的層次-093彩票提款安全吗,而如何有一個清晰的內容層次呢-__仙剑5dlc?設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起_|我们的歌声里歌词,不相關的拉開距離-_重修之灭仙弑神续集,同時形成一定的規律和節奏___雷立,這樣會讓用戶閱讀起來更輕鬆-覃辉的老婆林菁。

       undefined     

需要注意的是__花野真衣bt,界麵中的間距需要滿足一定的規律和節奏--31选7走势图福建大星彩,比如模塊之間的間距大於標題到內容的間距_-长江电力招聘;在內容中不相關聯的內容間距大於相關聯的間距_|-3110c刷机,如下圖所示|_何炅断背门。              

undefined     

天貓個人主頁的個人信息區排在最前麵就是遵循了用戶的瀏覽習慣|_盈彩网下载;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容---隋唐大运河开凿顺序;最後是我的福利排在了第三位這是產品想給用戶看的內容-2019年精准五肖。


京東金融的我的頁麵用戶的資產信息排在最前麵|-诺基亚翻盖手机,他首先是遵循了用戶的瀏覽習慣_326游戏中心注册,同時也是用戶想要看到的內容|_长春花卉市场,其次是功能入口區排在了第二的位置這是產品想給用戶看的內容|青岛极地海洋世界门票团购,最後是福利大禮包排在第三位這也是產品想個用戶看的內容|_掌上农业银行不能登录。

2.確認內容優先級|_阳明租房,將優先級高的放在前麵

將相關聯的信息整理之後就需要確認模塊的優先級了_||掌上新华APP,由於用戶的瀏覽順序是自上而下的-|345彩票正规吗,因此我們需要將優先級高的模塊放到前麵|清华同方太阳能价格。


那麼優先級如何判斷呢_|金丝雀定位?大家可以從三個方麵去考慮_-瓯江影城,第一是遵循用戶的瀏覽習慣|苏州十中吧;第二是用戶想看的內容-|moluoke;第三是產品想要用戶看的內容_-小米盒子越狱,如下圖所示-cctv6 直播。

       undefined     

天貓個人主頁的個人信息區排在最前麵就是遵循了用戶的瀏覽習慣__|霞浦西洋岛;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容_|360时时彩杀码平台;最後是我的福利排在了第三位這是產品想給用戶看的內容_-f1直播时间。


京東金融的我的頁麵用戶的資產信息排在最前麵--_筱月桂,他首先是遵循了用戶的瀏覽習慣||金逸国际影城影讯,同時也是用戶想要看到的內容__亿盈彩票骗局,其次是功能入口區排在了第二的位置這是產品想給用戶看的內容|-|360彩票网导航走势官网,最後是福利大禮包排在第三位這也是產品想個用戶看的內容-联想idealife。

3.確認重要內容_-|快穿之宛儿的任务H,將其差異化設計

在設計時我們需要知道-|-永盛彩票网合法吗?,優先級高的模塊不一定重要程度就高--详细个人自传,因此我們還需要確認模塊的重要層級___锈水财阀声望,同時利用背景||长号查短号、布局等方式進行差異化設計__-睿云网成绩查询 登录,用起用戶注意||艺术买比,如下圖所示_-_1288彩票是干什么的。

       undefined     

網易嚴選中的新人專享禮和品牌製造商直供就采用了差異化設計|-雅虎台湾,職工類模塊采用的是普通的宮格式布局|-|陕西府谷县,新人專享禮采用添加背景的方式___这五个人要火了照片,加深了模塊的縱深感_赛罗奥特曼图片,對比其他模塊更加突出|__美女一级片。


大麥網中的特色模塊和其他模塊也采用了差異化設計_--现任重庆市公安局局长,特色模塊采用拚圖的方式設計-_135彩票是什么样的彩票,其他模塊采用列表的方式進行設計_-_苍之涛天书,用戶進入頁麵首先就能夠看到這個模塊-|2019年每期正版四不像,提高用戶接受信息的效率-_|易赢彩票团队。


土豆視頻個人主頁的列表部分也采用了差異化設計--众发平台下载,消息提醒|_|周永慷、我的收藏-|145期富婆看图肖特、觀看記錄|抗战奇侠2之军刺、我的緩存這四個用戶常用的功能采用宮格式布局_|寒香记,其他不常用的我的會員__1588彩票是真的吗、客戶與反饋_试卖网、設置采用列表式結構___求购血粉,這樣也能夠提高用戶操作速度|188彩票在线网址。


二--|360彩票网官网大乐透、提高視覺層次的方法


當然內容層級確定了顯然不夠|_揭刘汉留下多少遗产,我們還需要考慮突出界麵的視覺層次|_-美璃格格演员表,這樣用戶才能夠清晰舒適的瀏覽我們的界麵-|_天津津工超市火车票代售点。那麼提高視覺層次的方法有哪些呢|-海比网?在設計中--盈彩吧是正规的吗,我們可以利用線-九阴真经门派内功、麵--双色球精准预测6十1、留白將模塊進行分割-__芬达兑奖网站;利用大小七咲风花、投影-_-广州公安金盾网、背景圖等突出視覺層次-|_钱先生理财;利用顏色對比提高視覺感受-店招图片;利用文字對比提高界麵的可閱讀性|||郑州基础教育教研网。

1.利用線||12月9号彩票3位数开?、麵_-小米4直播、留白將模塊進行分割

大家記得在設計前我們已經對界麵中相關聯的元素進行了組合--至尊无名,組合之後就可以利用線||倾城 许美静、麵||_金庸群侠传之苍龙逐日地图、留白的方式||雍正皇后种田记,將不相關聯的元素進行分割-跑马的汉子歌词,提高界麵的視覺層次|_|永州八记作者,從而提高用戶的瀏覽和操作效率|__诺基亚3110c软件。

       undefined     

線分割-_|奾奿聊天室:是最為基礎的分割方式_-|新密五个人火了,其優勢是占用空間小--丧尸围城2绝密档案、分割感弱||卓易彩票中了不给钱,多用於列表_|_中国达人秀张冯喜初赛、Feed流中-_-沈阳红番区打架喊人。需要注意的是-||金榜起名网,分割線顏色設置需要非常淺||_qq2009精简版,避免模塊之間強烈的分割感|--360彩票触屏版,比如橘子娛樂的列表就是采用若隱若現的線_|至尊彩平台下载,讓列表中的內容更規整|-_苏州洗头房。


麵分割||-芷江房屋出租:也可叫背景欄分割|_|角马网,其優勢是占用空間小|-阜康租房、可操作性高-_|cctv6高清直播,同時能夠更好的區分不同模塊之間的關係|_苏州网上车管所,多用於模塊和模塊之間的分割--c7000,比如轉轉個人主頁的模塊采用麵分割瀏覽性更強-|_英国欧汇腰椎挺。


留白分割||_观音童子:是iOS11發布之後興起的以留白或間距的方式進行分割|-众彩娱乐登录,其優勢是無強烈的分割感||诺基亚e72游戏下载,界麵清爽|-|众赢彩票网址,多用於比較有規律或以大圖為主的模塊之間的分割___临泉二手房,比如轉轉主頁下方的賣二手還錢-|-几号上班、買實惠好貨等_|106上买的彩票是真的吗,其內容部分都較為規則||阿克苏诺贝尔待遇,采用該方式較為合適_|07我型我秀朱晓东照片。

2.利用投影|至尊宝v530、大小-|云购彩票网站是骗局吗、背景圖突出視覺層次

為了突出界麵的視覺層次__369彩票官网平台,我們還可以通過投影|_|钰佳、大小-|2018白菜网论坛、布局等增加界麵的對比--|召召木木,從而突出重要信息||重庆特产有哪些。

       undefined     

投影|-哈雷摩托车报价:是界麵對比較常用的一種方式__优信彩票大发是真的吗,其優勢是提升界麵的空間感_|掌上购彩,改變視覺次序--|苍井空50分钟无码,通過投影大小的變化還可營造不同的空間關係__|沼泽猎手10,多用於卡片風格的設計中|_沈阳调料市场,比如Keep均是采用卡片風格的設計__开店程序,添加投影後讓界麵視覺層次更突出了--qq农场美人鱼。


大小__锅盔牙子:是大眾最為熟知的對比方式_|优彩师免费版,其優勢是通過大小對比能夠很快的拉開視覺層次--众彩彩票手机app下载,同時能夠很好的引導用戶瀏覽路徑_22彩票平台地址,比如ofo黃色的大按鈕遠遠都能看見-成都hm,該頁麵就一個目的掃碼用車-35彩票注册。


背景圖|_台湾身份证生成器:往往不如投影和大小常用--|穿越神墓之何为逆天,但是它的使用可以將模塊從其他樣式中年凸現出來-_06新粤彩报图,多用於banner_|姿姿堂、推薦等重要模塊中_|霍启文,比如美圖秀秀的推薦模塊|369彩票注册,該模塊可以說是美圖的核心模塊_|搞笑试卷。

3.利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式_掌上彩票官方网站,通過顏色我們可以明確哪些是重要信息--_3b今晚开奖号码是多少,在使用中我們可以通過色相_法网奖金、明暗_|078彩票软件安全吗、飽和度上進行對比---雅丽婷左旋肉碱,其多用在按鈕-_聚美优品网站打不开、重要信息-|-盈彩网下载软件、導航-|雅高布草、背景板中_勇者斗恶龙怪兽篇金手指。

       undefined     

自如首頁上的租房_--镀铬标准、服務--运盛彩票网行大运、旅行采用對比色進行強調對比|-优乐博彩怎么样,進入頁麵用戶就能夠清楚這三塊是是界麵的核心功能_|职工娱乐活动,同時引導用戶關注右側的具體服務信息|_托儿费。


淘票票首頁中的按鈕__|山东大学威海分校吧、引導提示_-_智彩快乐电子走势图、標簽欄選中均用了紅色進行強調對比-亿人娱乐官网下载,很容易引起用戶的注意|-丁丁和杨坤后场接吻,讓用戶看一眼就知道如何操作-_|上海一号店客服电话。


招商銀行首頁中的話題PK采用對比色進行強調對比_||塔罗牌大师tlp6868668,很容易引起用戶操作的興趣__|杨幂和杨颖的裸体图片。

4.利用文字對比提高界麵的可閱讀性

文字的層次感往往和字體大小和明暗有關_-_1995彩票反水025,其中字體大小是提高文字信息層級的重要手段_|-3cp彩票注册,在文字排版中如果文字之間的層次不清晰||_晴儿图片,那麼一定是大小的對比不夠-_|google trends,在UI中字體大小對比往往在4-8px較為適合_|_华嘉元,如下圖所示__-西安地铁1号线。

       undefined     

當字體大小對比適合之後就需要通過通過字體的明暗突出主要信息长治县鼓书,弱化次要信息_|雪弗莱官网,從而提高界麵的可閱讀性||7kk7小游戏,如下圖所示-256是黑彩票吗。

       undefined     

在UI設計中我們往往都設定了字體規範_李白谈爱原文,這樣不僅能夠達到設計統一_-键盘自动按键器,同時也有很好的對比性_娱乐天地手机版登录,常用字號為40, 36, 32,28,24, 22(px)--金星啤酒厂,比如優酷的星球頁麵-_|光明农场好玩吗,通過字體大小|闪光夫妇下车,顏色深淺的對比||众人帮怎么赚钱快,讓用戶首先看到重要信息||20018年六开彩开奖直播,弱化次要信息|详细个人自传。

            

三_||综艺盛典、總結


在界麵設計中為了降低用戶的理解成本|-易旺彩票网下载,突出重點內容_--江苏徐州一周天气预报,讓用戶使用起來舒適_妖精的尾巴洒洒,就需要有個清晰的內容層次和視覺層次__|脉诺通。

在設計前我們需要考慮將相關聯的元素進行組合_陕西2套都市快报;確認內容優先級|_众博棋牌骗了我二十万,將優先級高的放在前麵_-_11选5黑彩平台;確認重要內容___英雄联盟定级赛规则,將其差異化設計__2元彩票网走势图大全。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司---注册送300的彩票,為期望卓越的國內外企業提供卓越的UI界麵設計--|希苒女装、BS界麵設計 -东方花园爱唯侦察、 cs界麵設計 |35彩票网址、 ipad界麵設計 _|_众博网app、 包裝設計 ||诺基亚5700主题、 圖標定製 --_私募拉升股票、 用戶體驗 _|_驿站网络日记本、交互設計__as3培训、 網站建設 _--上海有蹦极吗、平麵設計服務-|靖州二手房。

 

標簽: 界麵設計

分享到__|一见钟情简谱: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap