产品经理懂UI设计师,4个小技巧

220 阅读3分钟

大家好,我是Kevin。这是2019年第136篇原创


国庆假期持续的每天一本阅读计划进行中。我在假期的前半段花了时间阅读交互、设计的书籍。用于提升和弥补自己创业后在设计沟通和交互策划的知识框架。


今天的复盘与整理来自:《写个大家看的设计书》,书本总共202页。本书来自国外设计师,美国罗宾·威廉姆斯(RobinWilliams撰写的。


同时在假期我更新了我的原型组件库,如果你需要可以点击这里查看并下载获得。


国庆更新|Kevin的原型部件库,374个原型部件


设计4个强调点


我在工作中,随着UI页面的辨识积累能够大概判别出什么是好的设计作品、什么是一般的设计,但我却没有办法告知一个标准让团队成员也快速具有这样的能力。但这本书中反复提及的4个强调点指出


对比contrast


对比的基本思想是,避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让他们截然不同。


重复repetition


上设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、字体、大小和图片。



对齐alignment


任何东西都不能再页面上随意安防。每个元素都应当与页面上的另一个元素有某种视觉联系


亲密性proximity


彼此相关的项应当靠近鬼归组在一起。如何多喝项目之间存在很近的亲密性,他们就会成为一个视觉单元,而不是多个孤立的元素。



一个对齐与亲密性的案例



左边的宣传单页经过亲密性与对齐的整理后来的效果。你可以看到效果是非常明显的!在没有增加元素和调整文案的情况下。


我见多太多设计师要求产品经理缩小与精简文案来满足他们的设计。其实我们应该首先思考的是设计上有没有可能优化点,而不是在没有开始前就“砍需求”,当然产品经理也应该输出需要、价值最高的文案。



设计中避免的问题



在对齐上:


避免在页面上混合使用多种文本对齐方式(也就是说,不要将某些文本剧中,而另外一些文本右对齐)


重复性上避免:


避免重复太多的一个元素,重复太多会让人套现。要注意对比的价值。


对比上避免:


要形成对比就加大力度,不要将一种粗线与一种更粗线进行对比。不要将棕色文本与黑色标题建立对比。避免使用两种或多种类似的字体,如果各个项不同,干脆让他们截然不同!



一个对齐、对比、重复性案例



可以看到通过对比,狗的头像方向与大小进行了变化、背景白色与黑色显明。同样重复了商店的hugs名字。增加了对齐效果,字体的排版有了虚拟的边界。



设计的路径是什么?


在这本书里,还介绍了一个设计师的路径应该是:


从中心点开始-将信息分组-创建重复


确定希望用户最先看什么,除非有了设计规范否则就应该创建一个有强烈对比的中心点;

按逻辑进行分组,将元素与组件的关系组合。通过组之间的距离来做亲和性;

建立一个可以明显感受到边界的对齐,比如垂直线条和照片边界等,切记勿用线条来做边界。最后创建重复可以是字体的样式、和页面中的元素。





好,今天的分享就在这里。