界麵沒層次||-云顶彩票首页,到底哪裏出了問題-|118主图库免费红姐图库?

2019-2-24 分享達人 ui界麵欣賞

如果您想訂閱本博客內容-_4d游戏,每天自動發到您的郵箱中|_铁托斯, 請點這裏

剛入行的新手設計師容易出現一個問題||-易记彩票是正规网站吗?,接到需求就開始設計-_|情况说明模板,最後出現的界麵和原型幾乎一模一樣__-mc擦皮鞋歌词,唯一的區別就是上了色_苍井空无码 亚洲 在线,加了圖片和圖標|--中国气象频道,最後提交審核時老板反饋-||missripley结局,“這個界麵看上去太“平”了_|_青岛极地海洋世界门票价格,你在這裏加個背景色吧-|掌上彩票;這個圖標太小仲博最新版下载326,你再放大一點|-_何家驹快播;這個位置你在加點裝飾……”||10500vip彩票官网。


這主要原因還是界麵沒層次導致的|||图标猜成语,雖然老板對設計不太清楚|铁将军防盗器官网,但是關於業務邏輯我們的設計稿是否表達清楚_|_夜游黄浦江,重點是否突出這個他最清楚了__诺尔丝假发。


那麼如何才能提高界麵層次呢__太剑玄天鸿蒙大道?我們可以從兩個方麵入手_盈彩在线平台是什么,在設計前我們需要考慮突出內容層次的方法-_北京市长是谁;在設計中需要考慮突出視覺層次的方法-芬迪斯。


目錄


一_|飞天侠女、突出內容層次的方法

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

  • 確認內容優先級__|陈奎元简介,將優先級高的放在前麵

  • 確認重要內容__汤池小镇,將其差異化設計

二-为啥人们啪啪后会感到悲伤、提高視覺層次的方法

  • 利用線雷神2 豆瓣、麵|_阿鲁科尔沁旗绿原网、留白將模塊進行分割

  • 利用大小__实名注册身份证号码、投影|--惠农租房、背景圖突出視覺層次

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

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




一-|长线放大器、突出內容層次的方法


當一個界麵信息量比較大時---361彩票登录入口,層次感好的界麵用戶進來能快速的獲得想要的信息__盈彩网时时彩计划,同時最終達到產品的目的|__高清无码在线苍井空。而層次感差的界麵用戶看半天也不知道要做什麼|_-公办专科学校,看一會也就走了_|补补补歌词。因此良好的視覺層級是界麵成功的關鍵-_苏锦良。在設計前我們需要將相關聯的元素進行組合|钓鱼用具价格大全;確認內容優先級-|驻华外国记者协会,將優先級高的放在前麵-_|张柏芝约谈谢霆锋;確認重要內容|--8岁儿童营养餐,並將其差異化設計__众赢彩票登陆。

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

在設計前|--霍尔瓦特大街 小说,產品原型圖已經將我們的元素進行了分類組合||微店网是真的吗,但是他們更多的是考慮邏輯-|132彩票的用户名、功能上的層次_框架尺寸,而如何有一個清晰的內容層次呢||重返神州?設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起_-|众亿彩票网官方,不相關的拉開距離-|金绒飞,同時形成一定的規律和節奏-||花色处女地,這樣會讓用戶閱讀起來更輕鬆_|中兴彩票代理。

       undefined     

需要注意的是|__兰西小屋论坛,界麵中的間距需要滿足一定的規律和節奏_-|日升丰,比如模塊之間的間距大於標題到內容的間距保定独立团;在內容中不相關聯的內容間距大於相關聯的間距__抓住偷水贼,如下圖所示|__105彩票苹果版安装。              

undefined     

天貓個人主頁的個人信息區排在最前麵就是遵循了用戶的瀏覽習慣_|中央13台;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容_|-鲤鱼山火山爆发时间;最後是我的福利排在了第三位這是產品想給用戶看的內容||淮安草根网。


京東金融的我的頁麵用戶的資產信息排在最前麵_-陈婷图片,他首先是遵循了用戶的瀏覽習慣||美生美时,同時也是用戶想要看到的內容_胸器白,其次是功能入口區排在了第二的位置這是產品想給用戶看的內容_|盈彩网彩票,最後是福利大禮包排在第三位這也是產品想個用戶看的內容|_|22彩票正规吗?。

2.確認內容優先級--_永盛国彩,將優先級高的放在前麵

將相關聯的信息整理之後就需要確認模塊的優先級了_陆贞传奇百度影音,由於用戶的瀏覽順序是自上而下的|-约彩怎么注册不了,因此我們需要將優先級高的模塊放到前麵--_注册送体验金。


那麼優先級如何判斷呢--乐视网tv版?大家可以從三個方麵去考慮_||中兴彩票app下载,第一是遵循用戶的瀏覽習慣---中大恒基;第二是用戶想看的內容|_金玉暖;第三是產品想要用戶看的內容--镀铬标准,如下圖所示-_云顶国际登录。

       undefined     

天貓個人主頁的個人信息區排在最前麵就是遵循了用戶的瀏覽習慣|_重庆单独二胎新政策;其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容_|云顶国际登录;最後是我的福利排在了第三位這是產品想給用戶看的內容-||35彩票突然维护了。


京東金融的我的頁麵用戶的資產信息排在最前麵|_-金牛区北改,他首先是遵循了用戶的瀏覽習慣|_宅男躲艳记txt下载,同時也是用戶想要看到的內容|_广州阳光家缘网,其次是功能入口區排在了第二的位置這是產品想給用戶看的內容-|注册送彩金,最後是福利大禮包排在第三位這也是產品想個用戶看的內容|-9岁女孩疑遭家暴。

3.確認重要內容-moko美空模特路遥,將其差異化設計

在設計時我們需要知道_|_邮政托运价格表,優先級高的模塊不一定重要程度就高__小的火星文,因此我們還需要確認模塊的重要層級-093a彩票,同時利用背景|-|村村通卫星、布局等方式進行差異化設計|-众发彩票取不出来钱,用起用戶注意_昆明越野车改装,如下圖所示-_|上海一号店客服电话。

       undefined     

網易嚴選中的新人專享禮和品牌製造商直供就采用了差異化設計-_中国现役上将,職工類模塊采用的是普通的宮格式布局|-|上海静安区火灾,新人專享禮采用添加背景的方式__卡门 德洛雷菲切,加深了模塊的縱深感__阜新苏阳不雅视频,對比其他模塊更加突出-|青岛订婚风俗。


大麥網中的特色模塊和其他模塊也采用了差異化設計-_金陀,特色模塊采用拚圖的方式設計__078彩票ios,其他模塊采用列表的方式進行設計_快穿之宛儿的任务H,用戶進入頁麵首先就能夠看到這個模塊_||008彩票论坛ll,提高用戶接受信息的效率_|35472藏宝阁玄机资料。


土豆視頻個人主頁的列表部分也采用了差異化設計-平望医院,消息提醒-_连锁销售在中国、我的收藏--_何思佳、觀看記錄|重庆ume电影院、我的緩存這四個用戶常用的功能采用宮格式布局-|_小动脉电影网,其他不常用的我的會員|_苏州哪里有洗头房、客戶與反饋--|致富彩骗局、設置采用列表式結構_|2580彩票,這樣也能夠提高用戶操作速度|--芜湖阳光半岛。


二||_注册彩票平台送彩金、提高視覺層次的方法


當然內容層級確定了顯然不夠_-黄山天狗望月,我們還需要考慮突出界麵的視覺層次-|优信彩票大发快3,這樣用戶才能夠清晰舒適的瀏覽我們的界麵_陈奎元。那麼提高視覺層次的方法有哪些呢|105官网彩票平台?在設計中|-|移动3g网络覆盖查询,我們可以利用線_-038彩票官方版苹果下载、麵---379虎嗅网、留白將模塊進行分割|__东三省二模;利用大小_芭蕾舞剧牡丹亭、投影-陈法蓉三级、背景圖等突出視覺層次|_|亿彩彩票手机版登录;利用顏色對比提高視覺感受-|234彩票平台怎么样;利用文字對比提高界麵的可閱讀性|-中大恒基官网。

1.利用線-_陈村天星影院、麵||_净留香、留白將模塊進行分割

大家記得在設計前我們已經對界麵中相關聯的元素進行了組合|--168彩票安卓版2819,組合之後就可以利用線__|黄油嘴规格、麵_|158彩票人工计划、留白的方式-|dygod电影天堂,將不相關聯的元素進行分割|_金御医,提高界麵的視覺層次_|_视觉卡盟,從而提高用戶的瀏覽和操作效率__鹿喜微断食纤体。

       undefined     

線分割-_永胜集团微信二维码:是最為基礎的分割方式|_二十二选五,其優勢是占用空間小_--008彩票平台、分割感弱|||零佣通,多用於列表||365彩票网站是否正规、Feed流中||138影视。需要注意的是|__团结柱,分割線顏色設置需要非常淺__-20元提现的棋牌app,避免模塊之間強烈的分割感_|-e72评测,比如橘子娛樂的列表就是采用若隱若現的線___众博国际街机讨论吧,讓列表中的內容更規整||_父亲的盾牌。


麵分割-|白袍之恋主题曲:也可叫背景欄分割__|365精彩每一天论坛,其優勢是占用空間小|_-桑叶采摘机、可操作性高--veor moda,同時能夠更好的區分不同模塊之間的關係_|卜冰,多用於模塊和模塊之間的分割||35彩票首页,比如轉轉個人主頁的模塊采用麵分割瀏覽性更強|_苦雨孤灯。


留白分割_|-万能上分器:是iOS11發布之後興起的以留白或間距的方式進行分割-|345彩票首页,其優勢是無強烈的分割感-万林股份,界麵清爽|-168彩票提不出款,多用於比較有規律或以大圖為主的模塊之間的分割|-十年寒窗苦读,比如轉轉主頁下方的賣二手還錢_-移动彩票提不了款、買實惠好貨等_||铁路调度系统,其內容部分都較為規則--_众购彩票网站,采用該方式較為合適|__诚毅学院体育教研室。

2.利用投影-_k mic、大小--上海食草堂、背景圖突出視覺層次

為了突出界麵的視覺層次_03wa论坛,我們還可以通過投影|--英雄联盟定级赛规则、大小|||赢彩彩票软件是假的吗、布局等增加界麵的對比_-中国票房,從而突出重要信息--传奇行会霸气名字。

       undefined     

投影__35彩票突然维护了:是界麵對比較常用的一種方式_-武打电影全集,其優勢是提升界麵的空間感__168彩票怎么玩,改變視覺次序-东北二嫂水仙百度云,通過投影大小的變化還可營造不同的空間關係|__宫商角羽打一成语,多用於卡片風格的設計中_|男科悍医,比如Keep均是采用卡片風格的設計-|168彩票网会员,添加投影後讓界麵視覺層次更突出了-_深圳第一现场网站。


大小__|娱乐天地代理总代理:是大眾最為熟知的對比方式|主要业绩,其優勢是通過大小對比能夠很快的拉開視覺層次|__360双色球走势图表大全,同時能夠很好的引導用戶瀏覽路徑_复古宫廷装,比如ofo黃色的大按鈕遠遠都能看見-|众赢彩票可靠吗,該頁麵就一個目的掃碼用車|__锦屏记19楼。


背景圖|诺基亚3110c游戏:往往不如投影和大小常用|_|众益彩下载,但是它的使用可以將模塊從其他樣式中年凸現出來--倪志福追悼会,多用於banner__红色警戒2全能王、推薦等重要模塊中--|钱王美庐,比如美圖秀秀的推薦模塊|-|干油泵,該模塊可以說是美圖的核心模塊|-怎么取消gprs。

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

顏色是最容易感知到的對比方式--|旋转罗盘,通過顏色我們可以明確哪些是重要信息|_聚美优品网页打不开,在使用中我們可以通過色相-|_天翼3g无线网卡、明暗_至尊争霸彩票合法吗、飽和度上進行對比_--601818,其多用在按鈕--_2m彩票2m彩票振撼来袭、重要信息_-4466kk、導航_楚州城、背景板中--|上海大专排名。

       undefined     

自如首頁上的租房_-_芜湖白金汉宫、服務--360双色球精准杀号定胆、旅行采用對比色進行強調對比-头顶锅盖身披麻袋,進入頁麵用戶就能夠清楚這三塊是是界麵的核心功能__跑狼电动车报价,同時引導用戶關注右側的具體服務信息__|注册彩票网站怎么注册。


淘票票首頁中的按鈕|_51jiemeng、引導提示-|2019年白姐先锋诗、標簽欄選中均用了紅色進行強調對比|-|三湾改编时间,很容易引起用戶的注意__众博国际app下载,讓用戶看一眼就知道如何操作-_-至尊争霸有赚到钱的吗。


招商銀行首頁中的話題PK采用對比色進行強調對比_-|金玲玲,很容易引起用戶操作的興趣|_|保定38军。

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

文字的層次感往往和字體大小和明暗有關-_陈明月爱情连连看,其中字體大小是提高文字信息層級的重要手段-__邵长老,在文字排版中如果文字之間的層次不清晰_|言承旭和ella,那麼一定是大小的對比不夠-|众盈彩票是不是真的,在UI中字體大小對比往往在4-8px較為適合|_nokia pc套件官方下载,如下圖所示--鹿喜微断食纤体。

       undefined     

當字體大小對比適合之後就需要通過通過字體的明暗突出主要信息-||肇东张锡才,弱化次要信息_-一级b成绩查询,從而提高界麵的可閱讀性|_|找法网查看律师回复,如下圖所示|_-银河彩票wwwa18cc。

       undefined     

在UI設計中我們往往都設定了字體規範_可恶的男妇科医生,這樣不僅能夠達到設計統一_-|重庆方言电视剧下载,同時也有很好的對比性-|永盛娱乐时时彩,常用字號為40, 36, 32,28,24, 22(px)-链家地产司歌mp3,比如優酷的星球頁麵_-_盈彩在线大发快3,通過字體大小-__小狼狗心水论坛,顏色深淺的對比_|-mc水观音擦皮鞋歌词,讓用戶首先看到重要信息_杨幂被迷奸,弱化次要信息__2011年重庆高考作文。

            

三_--方舟降压仪怎么样、總結


在界麵設計中為了降低用戶的理解成本-_硫磺的产地,突出重點內容_|_闽江学院教务系统,讓用戶使用起來舒適-_|南宁君怡酒店,就需要有個清晰的內容層次和視覺層次_-易彩网是什么。

在設計前我們需要考慮將相關聯的元素進行組合--_2011qq官方下载;確認內容優先級||-k7k小游戏,將優先級高的放在前麵-|印特尔;確認重要內容_|喷立婷,將其差異化設計|__365彩票聊天室。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司--_火车票转让58同城,為期望卓越的國內外企業提供卓越的UI界麵設計_重庆城投集团、BS界麵設計 _|联众好友在线下载、 cs界麵設計 _|1号彩下载、 ipad界麵設計 -|12彩票、 包裝設計 _-|短号怎么查长号、 圖標定製 _|雪花飞舞图片、 用戶體驗 -可劲玩神仙道、交互設計_|意彩账号怎么获得、 網站建設 ||_刀杆节、平麵設計服務---揭刘汉留下多少遗产。

 

標簽: 界麵設計

分享到-_亿发彩票怎么推广下级: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap