您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

如何利用走查表驱动设计改版

原创文章 分类: 经验/观点 版权:
20409 1162 837 49
2019-03-26
233.6
首页推荐

学会这招,?#20064;?#21482;能说过了 「通过详情页案例实操明白如何正确的使用走查表」



这个是我们EDC雪球小组的毕业团队课题

大家都努力了很久

从初稿到终稿大改都改了三四次

小改更是不计其数

但是大家都坚持把课题做完了

很?#37327;?但是能发布出来 却很开心

大家都很棒啊~还要继续加?#22242;丁?/p>




UI走查表有什么用?


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

Image title

Image title

Image title

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


在设计页面的时候,需要注意页面要传达给用户的信息重点,例如本次案例的产品需求中,该页面的功能是促使用户快速下单,信息上则要侧重于价格与优惠信息。

Image title


首屏信息是给用户的第一印象,在用户打开页面,尽可能展现出更多用户?#34892;?#36259;的内容, 而此次页面需要突出促销优惠信息,次要信息则放在后面。


Image title


02.页面视觉重点


相信大家平时经常听说0.618的?#24179;?#27604;例(斐波那契数列),屏幕方寸间合理运用?#24179;?#27604;例可以让界面视觉重心更加平稳,视觉更?#37038;?#36866;。同时有助界面区域分割,集中视觉焦点,承载更重要的信息,让整个界面布局更加合理。


Image title


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

Image title

Image title

02.元素间距符合各层级的关系


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


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

Image title

那么,如何更好地让信息按照相似属性分布合理呢?这就要利用5分、等分原则来让分布变得更合理,假设相同板块的间距值为a px,则不同板块为2apx。这样不仅在视觉可以将信息分布开来,还能让整体的布局更加规整,不会凌乱,尽可能使用同一或者同倍数的间距,更便于开发。


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

Image title

Image title

Image title

01.字体种类的控制


一个产品如果字体种类过多,会导致界面的不统一与混乱。通常字体控制尽量在3种以内,中文字体、英文字体以及特殊数字字体。如下图:

Image title

02.字号与粗细控制


字号过多使信息失去重点,基础字号控制在3种以内,目的在于清晰区?#20013;?#24687;的层级。正文字号建议为28px,副文案为24px,大标题、价格等重要信息需按实?#26159;?#20917;加大,令信息的层级区分更明显。


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

Image title


03.行距控制


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

Image title


04.字体颜色


字体主要以黑白灰为主:#333333?#666666?#999999;字体颜色深浅?#34892;?#33021;让信息层级主次分明,产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在产品中反复使用,统?#36824;?#33539;输出。

Image title

信息越重要,字体颜色越深。除此之外我们还需要注意到什么呢?也是很多刚入行的设计小伙伴很容易忽略的细节,产品的实际使用环境。比如,我们此次改版的产品详情界面就是线上下单,线下提货的运营模式,不仅需要考虑室内使用环?#24120;?#36824;需要考虑?#25945;?#27530;的室外强光环境。结合下图感受一下。

Image title

如何在强光环境下保证产品良好的视觉体验呢?这也是UI走查表需要注意到的细节点:强光测试(大于4.5:1)。

4.5:1经验数值参考前辈行业经验总结:

https://www.w3.org/TR/WCAG20/

https://www.sitepoint.com/making-bootstrap-accessible/


我们先观察一组颜色?#21592;齲?#22914;下图:

Image title

我们会发现字体颜色层级依然是深黑色、中黑色、浅黑色,相信很多设计师朋友已经注意到我们使用的颜色更深了,为什么呢?为了保证好在强光环境下的信息阅读可阅?#21015;裕?#22914;下图:字体信息最浅层级,浅黑色的色彩数值?#21592;?#25968;值都大于4.5:1。

Image title

强光测试链接:https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF

有?#24863;?#30340;设计师朋友或许已经注意到色彩值并没#333/#666/#999那么便于?#19988;?#20102;,为什么呢?

为了提升更好的视觉感受与界面的品质感,我们在字体颜色中采用了偏蓝灰,至于为什么,大?#20063;环?#32473;我一起观察下图,上图灰色看上去略微有一些脏脏的感觉,下图视觉更耐看、更有质感。


Image title

腾讯新闻、金色财经App中的也应用到了偏蓝灰,带来?#21046;?#38754;而来的清爽。


Image title


除了常用字体层级的颜色?#21592;齲?#22312;界面中针对关键的卖点信息还用到强调色,即品牌色

品牌色也会经常运用?#25945;?#27530;字体、提示文字、链接等等。

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


Image title

Image title

01.视觉比例


由于图标通常都是成群结对的出现,彼此之际的统一性显得非常重要,但是常常容易被忽略,可以制定如下图的图标盒子来规范尺寸。

Image title


02.图标设计要点


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


Image title


面性图标

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

Image title

线性图标

设计时应注意保持良好的线条粗细的统一,案例中使用2px的粗细线条重复使用,所有图标的粗细与文字粗细一致,和谐统一

Image title

03.图标尺寸


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

可以点击的按钮常用于?#24049;?#26639;、tab栏、操作栏(吸底按钮图示)常用尺寸为:48x48px 64x64px。如下如的?#24049;?#21644;吸底按钮都用了48x48px的大小。


Image title

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


Image title


04.标签的走查规范


从商业的角度,标签是为了凸显产品卖点,比如你在商场时常能看到“全场低至2.9折”这类的促销信息,其实在界面中同样也会有,目的就是为了抓住用户贪小便宜的消费心理,?#21592;让?#26377;标签的同类商品,用户会更佳倾向与有有标签的商品。

常用标签样式有三种表现样式,面性:填充一整个色块;线面结合:低饱和度的色块结合高饱和度的描边;线性描边:1px粗?#35813;?#36793;;

Image title

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


标签呼吸感规律:


很多初级设计师都在疑惑到底标签文字定多大合适呢?标签字号?#35805;?#20026;:18-22px

以"?#26434;?标签为例

Image title

如上图:外框边距横纵向成2倍的倍数关系,所以以后在画标签,只要先定好字号大小,剩下的边框边距就按照2倍的关系去拓展

Image title

为了确保我们做视觉稿的时候易于文本的阅读我们通常会用到一些配图,而这些配图通常也影响着我们整个界面的美观度,一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例,?#35745;?#30340;选取?#27604;?#20063;是重中之重,那么我们在项目中应该如何选取?#35745;?#24182;且正确的使用?#35745;?#30340;比例呢?


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


第一点:首先就是要做到让?#35745;?#30340;背景保持统一并且做到干净整洁

第二点?#21644;计?#20027;体的比例大小跟其他?#35745;?#20445;持统一避免出现?#34892;┩计?#23637;示局部?#34892;┩计?#23637;示整体

Image title

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


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


1:1,这?#30452;?#20363;比较适用于电商,它可以让商品?#35745;?#23637;示最大化。也是目前电商最主流的?#35745;?#20351;用尺寸。如下图:


Image title

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

Image title

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

Image title

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

Image title

压轴给大家带来一个小惊喜,我们整理了一个较为完整的设计走查表,希望在实践中能?#35805;?#21040;大家。

Image title

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


频繁过稿被?#20064;錺ass?

被要求执行无理的设计工作?

接到改稿任务无从下手?


当?#20064;?#23545;你的设计产生?#23460;?#26102;,不妨用设计走查的思路说服Ta。

Image title


可乐imcola

https://dribbble.com/cola_whong

1391粉丝/66关注

2018年度UI中国作品集入围 TOP50?#19979;?#35782;途首页达人砖家?#27604;?#19981;让lv.1
《魔童哪吒》插画总结?#38431;?#35265;的你》插画总结
8
士?#33267;?#20891;

提个小意见哈, 1.?#24179;?#20998;割线的举例?#34892;?#29301;强,仔细看的话只有正方形的首图才契合?#24179;?#20998;割线。 2.商品标签高度是否遮挡商品?#35745;?/p>

精彩!

  • 0
    大鱼海螺
    大鱼海螺

    走心了

  • 0
    Shayne_西恩
    Shayne_西恩

    哈哈哈哈~除了?#24179;?#20998;割线的举例?#34892;?#29301;强,其他都很棒

  • 0
    合作登陆
    合作登陆

    干货,真的学到很多。?#24179;?#20998;割线不能滥用,但是有时在觉得元素放哪都感觉有点?#27490;?#30340;时候,把?#24179;?#20998;割线一用,真的很奇效。斐波那契数列在?#35745;?#30340;比例上也很有用。

  • 更多评论
  • 可乐imcola

    可乐imcola

    https://dribbble.com/cola_whong

    2018年度UI中国作品集入围 TOP50?#19979;?#35782;途首页达人砖家?#27604;?#19981;让lv.1

    佳作推荐
    换一换

    扫描二维码
    去?#21482;?#31471;查看海报

    可乐imcola

    TA已经获得14?#22534;?#31456;啦

    • 成就勋章

      • 特别勋章

      • 身份勋章

    • 已拥有

    • 作品

      创造者才是真正的享受者。

    • 经验

      经验是一所好学校,可它的学生却经常旷课。

    • 活跃

      大神都是从围观群众开始的

    • 拓展

      作品、经验、活跃还不能满足你?

    京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

    广西福彩官网
    全国各地彩票开奖号码 吉林新快3走势图 通比牛牛攻略 香港赛马会特马网 云南快乐10分助手下载 2019年女子乒乓球世界排名 快乐十分手机版app 预测青海十一选五开奖结果 东城西就四肖八码 香港六合彩透码总部 大乐透60走势 31选7奖金 一分赛车开奖网址 广西快三是国家开奖吗 时时彩软件代理