酷coo豆
2017-06-13
浏览次数：-次
小编：这篇学习日记从生活中的几个案例，剖析了那些平面设计作品中不太友好的用户体验，从中总结的一些经验能够指导我们做出更优秀的设计作品。设计之事必作于细，更用心的思考，更专业的技能，才能创作更好的作品，更好的服务于人。
自荐语：看到最后，终于豁然开朗。
在互联网产品爆发的时代里，用户体验[1]，成了设计师和用户们常被提及的热词。一款产品[2]是否好用，人人都有自己的评判标准；设计师创造出来的作品能否深入人心，打动用户并让人们记住，其一可能来自于产品的优秀让人感动到哭，其二也有可能是因为产品的“硌手”让人尝到“多么痛的领悟”。
而今天，@酷coo豆 要和大家分享的几个平面设计案例，正是让我有了“痛的领悟”后，也让我成功的记住了它们。虽说问题都出在一些不起眼的细节，但作为设计师的我们，若能稍微用点心思，也能使其有拥有更好的体验。
原文地址：http://www.xxriji.cn/diary/129.html。作者：@酷coo豆 。公众号：followdesign。（转载请保留本段文字）
这是上次我去一个老陕味道的餐馆吃饭时，用手机随手拍下的菜单。随后，我将其发送到了我们的设计交流群，问了上述这个问题，接着便激发了大家的热烈讨论。现在给大家10秒钟的时间，看看这个菜单到底存在什么毛病？
情景再现：当时我在拿到这个菜单时，习惯性的被右侧图片所吸引，初略一看以为右侧图片对应左侧的菜名，然后飞快的勾选了左侧的“陕西凉皮”和“西安羊肉泡馍” 。
在菜品端上桌的那一刻，我整个人都不好了。因为我最想点的菜其实是“陕西凉皮”和“腊汁肉夹馍”。最后没办法，自己点的餐含着泪也要吃完！（哭脸表情）
问题1：图文不对应
稍微细心一点的朋友会发现：在图片的底部有一个很小的菜名标记，这也就是说右侧图片和左侧的菜名压根儿就没有对应关系，点错菜的情况也就不足为奇。
问题2：视觉流混乱
即便是一个足够细心的人，在被菜品图片所吸后，同时也发现了底部的菜名，然后又要从左侧的list中去勾选对应的菜品，这必然会降低点餐效率。
作为设计师要善于运用图像、图形、文字、色彩的对比，来引导用户的视觉流[3]，而不要指望用户来慢慢品味你的设计。除非你的作品特别精彩的耐人寻味，或者是糟糕得一塌糊涂的令人唏嘘！
接下来，我希望通过下面这几个案例，来进一步阐述以上观点。
这是一张登机口的路牌标识，大家看到后心里作何感想？是不是感觉视觉元素摆放太过随意、排版混乱，毫无设计可言。
▽修改后的图片（案例来源：k先生）
出现这种问题的主要原因是设计人员基础功底不够扎实，连基本的设计对齐原则都没有遵循，给人一种特别不严谨、不专业的印象，在用户体验的层面是掉分项目。
这是一款狼人杀游戏的设置界面，当时我朋友正在玩这款游戏，她拿着手机到我根前疑惑的问道：现在我到底有没有隐藏身份啊？
▽狼人杀游戏截图
在看了这个设计界面后，我也是一脸懵逼，因为用户在第一次接触这样的控件设计会忍不住思考：右侧的“否”到底是表示当前状态是“否”，还是我点击后执行“否”的状态？
这种不好的用户体验，在很多app设计中都有存在，要让用户减少思考，我们可以通过色彩的差异来轻而易举的打消用户疑虑。比如这是我修改后的示意图：
我们可以用灰色按钮表示否定，用彩色按钮表示肯定的状态，这是网页、平面以及UI设计中的惯用手法。修改以后的界面，对信息的传达也就一目了然了。
优秀的设计作品对色彩的使用，往往是奢侈的，但恰到好处的色彩点缀，却能对设计作品能够起到画龙点睛的作用。善用有彩色和无彩色的对比，能很好的区分内容的主次、是非状态、或逻辑关系， 在设计中一定不要忘记使用。
我们在平面设计创作过程中，除了要把控画面的美感外，始终要考虑设计作品的具体投放场景，户外还是室内？距离观众有多远？画幅有多大？在远处是否能看清标题等等。
当读者在看完这个平面设计信息后，希望读者是记住你的品牌，还是直接采取特定行动，这个都需要根据运营需求量身订做设计。
下面这两个案例，都是我在生活中曾见过的例子，由于当时未来得及拍照记录，以下配图为示范演示，非原图。
△带二维码的电梯广告，示范图。
当时我见到的原图，是印在电梯门的内侧，而其文案传递的核心诉求点是希望用户立即扫描二维码，但是设计人员却将二维码放在了整个版面的底部。姑且不说电梯里的信号怎样，要扫描这二维码还必须蹲下才行。这极其不方便、友好的用户体验，势必会减少数据的转换。
△带二维码的高速公路户外广告，示范图。
同样的，这是一副矗立在空旷的高速公路两旁的户外广告。在这样的环境中，平日除了来来往往的老司机，很少有行人路过。如果是为了扫这二维码，又有多少人会为之停下车来？这样的广告投放，难道不是拿钱给设计师打水漂？
通常这种户外广告更适合于企业做品牌推广，给人传递一种稳重可靠、财大气粗、值得信奈的感觉。所以在内容组织上可着重突出企业名称及品牌logo，直接给出主营业务，会有更好效果。
前面四个案例在美感、功能、用户体验上都有所欠缺，最后来说一个美观度还不错的案例。这个是一个网页设计案例，其唯一的槽点就是最右侧哪行竖向的浮动文字（见标记①），“最新课程”几个字向右旋转了90°，导致很难一眼看清写的什么。
然后我将文字简单的调整了一个方向后（见标记②），识别起来瞬间变得容易了许多。为了方面描述，我绘制下面了两个表盘。
△表盘上的数字，说明示意图
左侧是我们平日里最常见的手表、闹钟的样子，标记钟点的数字其底部始终朝下。而右侧的表盘，则是反人类设计的错误示范，其上半部分的数字（10、11、12、1、2）即使有一定角度的旋转，其识别性尚可；而下半部分的数字（4~8）其旋转角度则明显过头了，识别起来并不容易，倘若是一串更长的字符，阅读起来会更加费劲。
在处理平面设计的文字排版时，即便是要做倾斜、旋转的排版构图，都始终要保证文字底部一侧是朝向下方的基本原则，以确保文本的可读性！比如下图所举例子，就是一个极佳的正面案例。
△倾斜排版的海报设计，正面案例。Tips：大家可点击图片放大，观察海报上的小文字排版，其都有遵循上述的基本原则。
在对的时间和地点，将信息准确地传达给目标用户，是一副平面设计作品必须完成的使命。在设计制作的过程中，应尽量按照人们习以为常的阅读、生活习惯来编排视觉元素，以保证设计作品最基本的功能需求；真正好设计或产品，能让目标人群一看就懂或者用完就走，而不必要有过多的思考，或来慢慢揣摩你的设计意图。
以上便是@酷coo豆 整理的有关“平面设计中的用户体验”的全部内容。更多有关“平面设计自学”的话题请持续关注@酷coo豆，或访问平面设计学习日记网。
给大家分享一个：能帮你快熟突破成长瓶颈的教程网站，系统专业的最新课程，足矣让你应对这千变万化的世界。
目前已经50多套系统教程，注册账号后，充值399开通年会员，就能学习里面的所有教程啦，一套教程不足7.99元。视频地址：http://t.cn/RqRcUk9（平面设计学院）
[1]用户体验
即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。简单的说就是这个产品好不好用。影响用户体验的三个因素：系统（产品、作品）、用户和使用环境。
[2]产品
产品是指能够供给市场 ，被人们使用和消费，并能满足人们某种需求的任何东西，包括有形的物品、无形的服务、组织、观念或它们的组合。
[3]视觉流
主要指一个人在一定时间内对视觉对象的性质、特征、形态的理解和把握。好的设计能够让人们按照顺畅的次序沿着它向前流动。
人们一般的习惯是从左到右、从上到下。 长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。
本文由@酷coo豆 原创，首发于「平面设计学习日记-知乎专栏」与「平面设计学习日记网」。非商业转载请勿删改原文，必须注明作者、原文地址；商业或培训转载请联@酷coo豆 获得授权；侵权必究。
如果觉得文章所有帮助，欢迎大家点赞支持或慷慨赞赏，最后感谢你的阅读。
（完）
您的打赏，将用来升级服务器，感谢！