• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 该有的视觉元素全都有,设计不好到底差在哪里?

该有的视觉元素全都有,设计不好到底差在哪里?

作者:Eugen Eşanu 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含产品设计,用户体验,经验分享,设计原则,设计规范等相关知识,Eugen Eşanu希望在学习及工作中可以帮助到您

编者按:小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同样适用。今天的文章,我们就跟着一个设计师的经历来学点什么吧。

我有一个朋友,名字叫做 Jimmy,这的确是一个很普遍的名字。当我认识他的时候,他正供职于一家名为 Shmuckle 的公司,而他正是这家公司的设计师。和所有的设计师一样,他日思夜想梦寐以求的,是成为一名著名的设计师,而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样,着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上,而是身体力行,力图在公司里面推行好的设计。在 Jimmy 的眼中,好的设计应该是直观的、创新且令人愉悦的。

当然,故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

这一次,Jimmy 正在执行一个重要的项目,这个项目的成败将会直接影响到他的职业生涯。这次的任务,他需要为他们公司的一款产品,重新设计整个控制面板。而就在这次的项目当中,Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B,那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频,阅读曾经给他启发的文章,收听其他同行所开设的播客,以期在其中找到感觉或者灵感。

可惜,灵感并没有如期而至。局面尴尬了。

就在此刻,援手到了。Sarah 是公司的资深设计师,正巧这个时候路过 Jimmy 的工位,看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊,她早年入行的时候,同样经历过这样的状态,为求一好设计而痛苦不已。如今,她已经能够轻松驾驭不同的需求,足以应对复杂多变的设计项目。

「Hey Jimmy,老远就看到你正在揪头发,看样子正在构思新设计吧,瞧你这个状态,应该不太顺利吧?」

「诶,客户说让我给他们重新设计整个控制面板。他们觉得不够好使,希望新的控制面板能够更好展示信息,提升效率,最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试,有人觉得挺棒的,有人又非常讨厌,还有一部分直接说还得接着改。现在,我觉得无能为力,不知道要怎么弄了。」Jimmy 保持着挠头的姿势,盯着屏幕说道。

「别纠结,」Sarah 微笑道:「如果一直盯着问题解决问题是常常会陷入这样的困境的,解决方案其实并不复杂,你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了,问题就会迎刃而解了。其实,关键也就是几个基本的设计原则。」

「虽然这话经常听到,但是真的能行?」Jimmy 狐疑地盯着 Sarah,思忖两秒感觉到大姐头这是要传授秘籍,便摸过小本子,端正坐姿,准备做笔记:「那么,都有哪些原则呢?」

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,说道:「下楼散步吧,咱们边走边聊。」

「其实,在产品完成之后,是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡,慢慢地开始说。

保持清晰

Jimmy,如果脑子里面的思路没有梳理清晰,很难做出条理清晰的产品的。因此,在设计产品之前,先应当消除思维中的混乱,有几个事情,在设计的过程中要始终保持关注:

  • 业务目标,客户的问题和需要的功能则会催生设计,而这几个因素之间是存在关系的。
  • 永远不要为了好看而牺牲功能。
  • 下一步要做的事情始终要是不言自明的。
  • 对于最重要的内容,要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
  • 各种尺寸的文本都应该清晰可见。
  • 图标应该精确而锐利。
  • 除此之外,要让设计保持微妙而恰到好处。
  • 通过设计,你的用户应该本能的知道他在哪里,以及该做什么。

产品的外观最终都是在清晰的设计(或者不够清晰的设计)之下的副产物。清晰的设计意图,最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道,一个混乱而复杂的产品始终是源自于制造者本身的混乱,说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰,也要专注于当前的任务,一个交互性强、可操作性优秀的 APP 才是用户所需要的,而要做到这一点,屏幕上的内容应当始终是最新的,并且始终保持较高的相关性。与此同时,APP ?也应当作为用户意图的延伸。如果用户打开了你的 APP,想要解决某个问题,执行某个任务,而你的 APP 做不到这一点,那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟,梳理了一下思路,继续说道:「你看,我们所做的一切都是为了确保我们的方案,能够在正确的环境中,面对着对的用户,解决亟需解决的问题。当然,我们要经历很多次的迭代,才能靠近这一目标。」

主观的愿景

「许多设计师和开发者都在说,APP 应该灵活,应该满足所有客户的需求。好吧,Jimmy,这些说法都是胡说八道的。但是有一个说法很真实,也需要你时刻谨记:试图取悦每个人只会带来无尽的压力和痛苦,让你沮丧,失去资源。所以,不要害怕失去一部分用户,真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品,必须始终清楚它到底是服务于谁的。只有牢记真正的用户,明白他们的需求,才能开发出真正有效的解决方案。最好的数字产品当中,都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近,看着外面来往的人流,Jimmy 忍不住问到:「那其他的用户呢?」Sarah 笑着回答:「当我们满足目前的目标之后,才能顾的上其他的人。我们的目标用户才是核心,其他的人不喜欢,和我们的愿景不匹配,也不用操心。市场上会有其他的应用或者服务能够满足他们,让他们高兴,而我们总是只能身处一个阵营,你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

当人们寻找软件和服务的时候,他们要的并不是功能,他们要的是解决问题的方法,一个和自己相匹配的愿景。——37Signals《Getting Real》

反馈系统

下一个原则,也是一个很重要的注意事项,那就是反馈。反馈能够帮用户确定操作是否执行了,明白结果是否发生,让用户明白当前的情况:

  • 交互发生时,相应的交互元素应该被凸显出来
  • 进度指示控件应该持续地显示当前状态
  • 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道,即使技术如此的进步,人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体(视觉或者触感)需要感受到反馈,再像大脑发出信号,而虚拟的界面背后到底在发生什么,需要全面的交互设计传递出来,只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的,用户不应该在这个事情上再费劲去思考了。因此,你手边应该有关于心理学、行为学这类能够揭示人类思考的图书,因为它们能够帮你提升技能。」Sarah 喝了一口咖啡,润了润嗓子,带着 Jimmy 又溜达上楼,回到了办公室。

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻,」Sarah 又提到了一个看似无用但是经常被说起的概念:「你看,UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似,这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来,用户会更快地学会和理解。」

「正是因为隐喻的存在,现实的经验和虚拟的交互产生了关联,用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上,用户会下意识地点击被

您可能想查找下面的文章:

  • 网站产品设计参考的几条原则
  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 为什么不要再问用户「你们到底想要什么」?
  • 这10个不好用的微信设计,有哪些深层次的产品逻辑?
  • 基础小科普!浅谈「列表视图」与「网格视图」的用法

相关文章

  • 2018-08-23无论趋势怎么变,掌握这些设计节奏就不怕过时!
  • 2018-08-23写给设计师的信息架构基础知识指南
  • 2017-08-06手机网页wap用Bootstrap还是jQuery Mobile
  • 2017-08-06垂直栅格和渐进式行距应用举例
  • 2017-08-06HTML中的input type="reset"标签失效(不起作用)的可能原因。
  • 2018-08-23杜蕾斯让人高潮迭起的海报,你也能快速做出来!
  • 2018-08-23设计到底有哪些价值?让谷歌设计Leader 来告诉你!
  • 2017-08-06网页在各种分辨率和浏览器中均可正常显示的方法
  • 2017-08-06form表单中的Input使用disabled不能提交的解决方法
  • 2017-08-06对div盒子模型使用心得总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • IE6/7下a.getAttribute(href,2)的问题分析及解决
    • 如何设计问卷,才能收集到高质量的数据?
    • 网页设计的平面构成排版能力的介绍
    • 超干货!如何利用记忆心理学提高用户体验?
    • 如何打造极简设计?来看英才APP的实战案例!
    • 关于div+css及Web标准网页的好处
    • 哟哟哟!学会点线面,排版好方便!
    • 超全面总结!产品设计中的可拓展性原则
    • 想要提升用户体验,这6种使用插画的方法颇为不错
    • Google对话式交互规范指南(九):对话中不存在“错误”

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有