• 学会这个方法做设计,老板只能让你一稿过了! - 优设网 - UISDC

    学会这个方法做设计,老板只能让你一稿过了!

    2019/04/07 22202评论 25

    频繁过稿被老板pass?被要求执行无理的设计工作?接到改稿任务无从下手?当老板对你的设计产生质疑时,不妨用设计走查的思路说服Ta。

    UI走查表有什?#20174;茫?/span>

    一套成熟的UI走查表,能更科学更高效地改稿,减少设计中的反复?#28304;恚?#20063;能让评审交付时更有理有据。不仅仅停留于看上去顺眼、我觉得挺好、先这样的视觉表层。更深一层来说,走查表有助于培养设计师的结构化思维,形成一个完整的设计体系。

    文章阐述的观点

    如何走查信息层级

    1. 页面要表达的意思是否正确

    在设计页面的时候,需要注意页面要传达给用户的重点信息。

    例如本次案例的产品需求中,该页面的功能是促使用户快速下单,信息上则要侧重于价格与优惠信息。(如下图)

    首屏信息是给用户的第一印象,在用户打开页面,尽可能展现出更多用户?#34892;?#36259;的内容。

    而此次页面需要突出促销优惠信息,次要信息则放在后面。(如下图)

    2. 页面视觉重点

    相信大家平时经常听说0.618的?#24179;?#27604;例(斐波那契数列)。屏幕方寸间合理运用?#24179;?#27604;例可以让界面视觉重心更加平稳,视觉更加舒适。

    同时有助于界面区域分割,集中视觉焦点,?#24615;?#26356;重要的信息,让整个界面布?#25351;?#21152;合理。(如下图)

    淘宝、京东到?#19994;?#25104;熟的一线产品?#24179;?#27604;例运用,在视觉焦点区域都向用户展示了关键信息。

    3. 元素间距符?#32454;?#23618;级的关系

    为什么页面会杂乱无章?主要是信息一味地堆砌,分布没有区别,但只要遵从以下方法,页面就会清晰很多,有节奏的呼吸感也出来了。

    同类的板块不应被混乱的间距区隔开来,它们应该更集中,并且整体与别的板块区别开来。同理,不仅仅是板块,元素与元素之间?#24425;?#22914;此,这样用户可以更加快速地看到自?#21512;?#35201;的东西。

    那么,如何更好地让信息按照相似属性合理分布呢?

    这就要利用5分、等分原则来让分布变得更合理,假设相同板块的间距值为a px,则不同板块为2a px。

    这样不仅在视觉可以将信息分布开来,还能让整体的布?#25351;?#21152;规整,不会凌乱,尽可能使用同一或者同倍数的间距,更便于开发。

    案例中,相近元素的间距为16px(a px),则不同类别的元素为32px(2a px)。

    如何进行文字规范走查

    1. 字体种类的控制

    一个产品如果字体种类过多,会导致界面的不统一与混乱。

    通常字体控制尽量在2-3种?#38405;冢?#20013;文字体、英文字体以及特殊数字字体。如下图:

    2. 字号与粗细控制

    字号过多使信息失去重点,基础字号控制在3种?#38405;冢?#30446;的在于清晰区分信息的层级。

    正文字号建议为28px,副文案为24px,大标题、价格等重要信息需按?#23548;?#24773;况加大,令信息的层级区分更明显。

    加粗字体往往是整个界面的视觉焦点,重点的文本(如标题、价格)需要加?#25191;?#29702;,注意控制字体加粗的使用,以免造成信息层级的混乱。下图为调整字号?#25353;?#32454;的前后对比:

    3. 行距控制

    行距太小不便于用户阅读,太大会显?#30431;?#25955;,所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比:

    4. 字体颜色

    字体主要以黑白灰为主:#333333?#666666?#999999。

    字体颜色深浅?#34892;?#33021;让信息层级主次分明,产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在产?#20998;?#21453;复使用,统一规范输出。

    信息越重要,字体颜色越深。除此之外我们还需要注意到什么呢?

    ?#24425;?#24456;多刚入行的设计小伙伴很容易忽略的细节,产品的?#23548;?#20351;用环?#22330;?/p>

    ?#28909;紓?#25105;们此次改版的产品详情界面就是线上下单,线下提货的运营模式,不仅需要考虑室内使用环?#24120;?#36824;需要考虑到特殊的室外强光环?#22330;?#32467;合下图感受一下:

    如何在强光环境下保证产?#22952;?#22909;的视觉体验呢?这?#24425;荱I走查表需要注意到的细节点:强光测试(大于4.5:1)。

    我们先观察一组颜色对比,如下图:

    我们会发现字体颜色层级依然?#24039;?#40657;色、中黑色、浅黑色,相信很多设计师朋友已经注意到我们使用的颜色更深了,为什么呢?

    为了保证在强光环境下信息的可阅读性,如下图:字体信息最浅层级,浅黑色的色彩数值对比数值都大于4.5:1。

    强光测试

    有?#24863;?#30340;设计师朋友或许已经注意到色?#25163;?#24182;没#333333、#666666、#999999那么便于?#19988;?#20102;,为什么呢?

    为了提升更好的视觉感受与界面的品质感,我们在字体颜色中采用了偏蓝灰,大家不?#26639;?#25105;一起观察下图,上图?#30097;?#30475;上去略微有一些脏脏的感觉,下图视觉更耐看、更有质感。

    腾讯新闻、金色财经App 中也应用到了偏蓝灰,有种扑面而来的清爽。

    除了常用字体层级的颜色对比,在界面中针对关键的卖点信息还用到强调色,即品牌色。

    品牌色?#19981;?#32463;常运用到特殊字体、提示文字、链接等?#21462;?/p>

    改版前,促销信息缺少提示入口。改版后,以品牌色作为入口字体颜色,引起用户注意。(如下图)

    如何通过设计规范走查图标

    1. 视觉比例

    由于图标通常都是成?#33322;?#23545;的出现,彼?#24605;?#30340;统一性显得非常重要,但是常常容易被忽略,可以制定如下图的图标盒子来规范尺寸。

    2. 图标设计要点

    设计图标时应注意基础形状?#20174;茫?#20445;持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行设计,既能统一大小又有整体感。

    面性图标

    设计时需要注意挖空比例的一致性,保持图标的整体性。如价格走势、?#23548;?#36890;知这一排图标,挖空比例控制在20%。

    线性图标

    设计时应注意保持统一的线条粗细,案例中2px的粗细线条重复使用,所有图标的粗细与文?#25191;?#32454;一致,和谐统一。

    3. 图标尺寸

    在app中,功能图标大致可分成两种:可以点击的按钮;不可点击的展示图标。

    可以点击的按钮常用于导航栏、tab栏、操作栏(吸底按钮图示),常用尺寸为:48x48px、64x64px。

    如下图的导航和吸底按钮都用了48x48px的大小。

    不可点击的展示图标常用于信息展示位置(价格走势/规格/评论等图示)常用尺寸为:24x24px 32x32px。

    如下图,评论模块中的展示图标使用24x24px,价格走势则使用了32x32px的尺寸。

    4. 标签的走查规范

    从商业的角度,标签是为了凸显产品卖点,?#28909;?#20320;在商场时常能看到「全场?#26925;?.9折」这类的促销信息。

    其实在界面中同样会有,目的就是为了抓住用户?#22534;?#27611;和刺激性消费心理,对?#35753;?#26377;标签的同类商品,用户会更加倾向于有标签的商品。

    常用标签样?#25509;?#19977;种表现样式:

    • 面性:填充一整个色块。
    • 线面结合:低饱?#25237;?#30340;色块结?#32454;?#39281;?#25237;?#30340;描边。
    • 线性描边:1px粗细描边。

    如上图?#20309;?#23637;示清楚,在原来基础上放大了1倍,运用规则与之前提到的图标一样,根据模块功能的重要性去搭配,按照重要到次要的排序是:面性>线面>线性。

    标签呼吸感规律

    很多初级设计师都在疑惑到底标签文字定多大合适呢?标签字号一般为:18-22px。

    以「自营」标签为例,如上图?#21644;?#26694;边距横纵向成2倍的倍数关系。

    所以以后在画标签,只要先定好字号大小,剩下的边框边距就按照2倍的关系去拓展。

    如何走查?#35745;?#27604;例的合理性

    为了?#32321;?#25105;们做视觉稿的时候易于文本的阅读通常会用到一些配图,而这些配图通常也影响着我们整个界面的美观?#21462;?/p>

    一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例,?#35745;?#30340;选取当?#28784;彩?#37325;中之重,那么我们在项目中应该如何选取?#35745;?#24182;且正确地使用?#35745;?#30340;比例呢?

    1. ?#35745;?#20351;用的规范

    首先要做到让?#35745;?#30340;背景保持统一并且做到干净整洁。

    ?#35745;?#20027;体的比例大小跟其他?#35745;?#20445;持统一,避免出现?#34892;┩计?#23637;示局部,?#34892;┩计?#23637;示整体。(如下图)

    2. ?#35745;?#27169;块的常用使用比例

    UI设计中?#35745;?#30340;比例常用的有下列几种:

    1 : 1,这种比例比较适用于电商,它可以让商品?#35745;?#23637;示最大化,?#24425;?#30446;前电?#22871;?#20027;流的?#35745;?#20351;用尺寸。如下图:

    16 : 9,这种比例比较适用于视频,这是标准的人体工程学比例,根据人体工程学家的研究发现人的两只眼睛的视野范围并不是方的,而是一个长宽比例为16 : 9的长方形,所以我们看到的视频比例通常会采用16 : 9。

    4 : 3,这种比例应用于新闻类APP比较多。

    它源自于一些微小型相机最原始的尺寸比例,不需要进行过多比例的裁剪,应用起来比较方便,对于需要展示大量的?#35745;?#20449;息类的产品来说特别适用。

    如果你还是不知道如何去使用尺寸,那么你可以直接查找相关竞?#26041;?#34892;设计。

    UI设计走查表

    我们整理了一个较为完整的设计走查表,希望在?#23548;?#20013;能够帮到大家。

    除此以外,作为一名UI设计师,不仅要懂得执行设计,同时也要做?#20204;?#26399;对产品的?#29616;?#24037;作,如了解项目背景、目标用户、品牌特点等信息,从而能更深层理解产品,让设计更加贴近产品。

    欢迎关注作者的微信公众号:「EDC设计研究?#34892;摹?/p>

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/design-walk-through-method

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    版式设计 设计师 扁?#20132;?#35774;计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 福建时时下载手机版 以色列麻将玩法 重庆欢乐生肖是官方的吗 11选5任6中奖是多钱 4685開獎直播 新疆时时每天号 重庆幸运农场开奖计划 佳佳山东麻将游戏充值 竞彩最新开奖 排列五奖现场直播 赛车计划交流群推荐 优乐江西麻将下载下载 新浪爱彩正规安全吗 三地太湖钓叟字谜 重庆时时五星基本走势 江西快3走最大遗漏