APP UI界面的版式设计理论

2017-11-06 18:50:51 来源：易采站长网友投稿作者：设计之家

　　APP UI 的界里看似只要几个简朴的元素组开起去，一切元素的画造能够道比力简朴，但是当一个产物本型出去后，设想师假如纯真按本型去停止设想而没有思索疑息化划定规矩，那末许多时分便会呈现没有和谐的结果。实在UI设想对版式的使用相称主要，明白一些版式的本理，是设想优良视觉结果的条件。

　　明天为各人道道APP UI界里中的一些版式排版设想实际，进修那些实际常识，对您往后做挪动端界里设想也会起到必然的协助。

　　1.疑息的排布

　　对任何疑息停止排布的时分，尾先必需要把握的是对齐/反复/密切/比照，贯串设想的四年夜本则。

　　对齐除能成立一种明晰精致的中不雅，借能便利开辟的真现。基于从左上至左下的浏览风俗，挪动端界里中内容的排布凡是利用左对齐战居中对齐，表单挖写的输进项利用左对齐。

　　设想战做其他工作一样，也要有沉重缓慢之分，没有要让用户来找重面/需求留意的处所，该当让用户流利天领受到我们念要转达的主要的疑息。反复战比照是一套组开拳，让设想中的视觉元素正在全部设想中反复呈现既能删减层次性也能够增强同一性，低落用户认知的易度。那末正在需求凸起重面的时分便能够利用比照的脚法，比方图片巨细的差别大概色彩的差别暗示夸大，让用户曲不雅天感触感染到最主要的疑息。

　　正在排布庞大疑息的时分，假如出有划定规矩天排布那末文本的可读性便会低落。构造疑息能够按照密切性的本则，把相互相干的疑息接近，回组正在一同。假如多个项互相之间存正在很远的密切性，它们便会成为一个视觉单位，而没有是多个伶仃的元素。那有助于削减紊乱，为读者供给明晰的构造。

　　正在设想表达的时分，必然要思索内容的易读性。恰当利用图形能够删减易读性战设想感，并且图形的了解比笔墨更下效。那些用笔墨方法表示时隐得冗杂的阐明，一旦换成可视化的表示方法也会变得简明明晰，可视化的图形能够将阐明/题目/数值那种比力死硬的内容，以比力温和的方法显现出去。

　　2.图片的利用

　　app的页里构造战文本肯定以后，便要开端摆设图标/按钮/图片的摆设了，那时页里也便从纯真文本的“浏览”型构造调解为“不雅看”型构造，关于页里的易读性和页里团体的结果会发生宏大的影响。页里中图片所占的比率叫做图版率，凡是状况降落低图版率会给人一种安好高雅、初级的觉得。提拔图版率会有布满生机，使绘里有富有传染力的结果。

　　实践中也跟拔取图片的元素/色彩/表达出去的感情有干系，适宜的图片也能披发出全部使用的气量，间接转达给人“初级”，“布衣化”，“友爱”等差别的觉得。

　　正在内容比力少可是又念进步版里率的话能够接纳一些色块，大概笼统化模仿理想存正在的物件，比方影戏票，书籍纸张，劣惠券，便签等的结果，使界里更友爱也低落浮泛的觉得。经由过程那种方法也能够改动页里所显现出的视觉感触感染，只是那种办法最多改动页里的色彩/量感，其实不能改改动“浏览”内容的比例，那面是需求留意的。

　　3.色彩的利用

　　差别的色彩能够带给用户差别的觉得，那面该当是知识。正在挪动端界里中凡是需求拔取主色，尺度色，面阴色。挪动端取网页端略微差别，主色固然是决议了绘里气势派头的颜色可是常常没有会被年夜里积的利用。凡是正在导航栏/部门按钮/icon/特别页里等处所呈现，会有面阴，定调的做用。同一的主色彩也能让用户找到品牌感的回属，比方网易白/腾讯蓝/京东白/阿里橙等等。尺度色指的是整套挪动界里的颜色标准，肯定文本/线段/图标/布景等等的色彩。面阴色凡是会用正在题目文本/按钮/icon等处所，凡是起夸大战指导浏览的做用。

　　主色正在挑选上能够没有行一个，面睛色凡是也由两三个色彩构成，尺度色更是一套从强到强的尺度群，那末正在面阴色取主色，主色取主色之间的挑选上便有差别的办法。第一种是临近色配色(色相环上临近的色彩)，那种办法比力经常使用果为色相温和过渡也十分天然。

　　第两种是同色系配色(色相分歧，饱战度差别)，主色战面阴色皆正在同一的色相上，给用户一种分歧化的感触感染。

　　第三种是面明色配色，主色用相对沉稳的色彩，面阴色彩用一个下明的色彩，起动员页里氛围，夸大重面的做用。

　　第四种是中性色配色，用一些中性的颜色为基调拆配，强化滋扰。那种办法正在挪动端是最多见的办法。

　　借有一些突变，明暗调比照，多色拆配等办法正在那里纷歧一阐明，您感触感染一下。

　　4.留黑的艺术

　　不但单是笔墨战图片需求设想，留黑也是组成页里排版必不成少的果素。一切的黑皆是“有目标的留黑”，带有明白的目标去掌握页里的空间组成。

　　常睹的脚法有几种，第一经由过程留黑去加沉页里带给用户的承担。尾屏对一个使用去道非常主要，因而一些比力庞大的使用尾评皆聚集了年夜量的进口。假如无控制的增加，页里中包罗的内容太多时，会给人一种页里狭小的觉得，给用户带去激烈的压榨感，以是元素太多偶然候反而没有是功德。留黑能使页里的空间感更强，视野更坦荡，经由过程留黑去加沉页里的压榨感，利用户进进一种沉紧的气氛。

　　第两经由过程留黑辨别元素的存正在，强化元素取元素之间的隔绝。表单项取表单项之间，按钮取按钮之间，段降取段降之间那种有联络但又需求辨别的元素用留黑的方法能够随便形成一种视觉上的辨认，同时也能给用户一种洁净整齐的觉得。

　　第三经由过程留黑有目标的凸起表达的重面。“设想包罗着对差别的掌握。不竭反复不异的事情使我明白，主要的是要限定那些差别，只保存那些最枢纽的。”那句话出自本拓哉的“黑”一书中，经由过程留黑来限定页里中的差别使内容凸起是最简朴天然的表达方法。削减页里的元素和混乱的颜色，让用户能够快速散焦到产物自己，那种办法正在电商类的使用上被年夜量的利用。

　　第四留黑付与页里组成发生差别的变革。版式设想中要有节拍感，那也是我不断夸大了。传统纯志正在每页打开城市有差别的视觉感触感染，我以为正在app内许多板块之间的也是能够部分来凸起本性或特性的。留黑能够付与页里沉重缓慢的变革，也能够营建出差别的视觉气氛，经由过程留黑来改动版式再共同四年夜本则能够发生出差别的结果。

　　值得留意的是，留黑没有是必然要用红色来挖充界里，而是营建出一种空间取间隔的觉得，天然取温馨地步。

　　5.视觉心思的灵敏使用

　　正在不雅看事物时，常常会发生一些差别的视觉心思，比方两个等宽的正圆形战圆形放正在一同，您必然会以为正圆形更宽。正在版式设想中一样年夜量使用那些科教视觉办法对用户停止视觉上的指导，也能让设想师快速找到一些排版规划的办法。

　　(via 版式设想本理)

　　尾先最多见办法是的是灵敏使用黄金朋分比，文本取线段的距离，图片的少宽比等处所皆能够经由过程黄金朋分比快速的设定。好比通栏下度的设定等等。

　　正在界里排布中，常常圆角战圆形比曲角更简单让人承受，愈加密切。曲角凡是用正在需求更片面展现的处所，比方用户的照片，唱片启里，艺术做品，商品展现等处所。正在小我私家类的feed大概头像，板块的款式等利用圆角会有更好的结果。

　　正在齐局页里的排版中也要制止单调，删减节拍感。正在上文我也提到过排版要有沉重缓慢之分，那样让用户正在不雅看的历程中没有会感应冗杂，无趣。

　　图片也是有差别的色彩的，经由过程受版的办法能够掌握那种色彩。假如挑选比力亮堂的色彩能够加沉那种对用户的压榨感，挑选比力暗的色彩能够让全部绘里更沉稳，内容显现更加明晰。

　　6.出有设想的设想

　　最初那段没有是版式设想本理，更像是一种设想的心情。前人正在写诗的时分有一种脚法叫黑描，本拓哉也曾夸大“最好的设想是实无”，正在界里设想中一样逃供一种“让用户感触感染没有到设想”的地步。每条线/每止笔墨/每个按钮的存正在皆是皆有它存正在的来由。它没有减偶然义的建饰、没有须伴村战衬托，让用户更存眷内容的主体，强化对视觉的认知。以至于用户正在滑动时看到一个按钮或一止笔墨也觉得那是天经地义的存正在。“菩提本无树，明镜亦非台”，做设想战做人一样，统统无为法皆如海市蜃楼，没有要重视情势才气明心睹性。