• <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 首页 > 网页教程 > 设计分享 > 坏设计 VS 好设计:从5个对比案例中获得设计经验

    坏设计 VS 好设计:从5个对比案例中获得设计经验

    时间:2018-05-08    来源:人人都是产品经理

    对比坏设计与对应的好设计非常有趣,而且设计师可以从中获得重要的经验。这种对比突出了设计中要避免的陷阱,同?#27604;?#25105;们理解了如何将设计理论转换成现实生活中的解决方案。

    Jared Spool,美国作家、研究员及可用性专家,曾经说过:

    好的设计,当它工作良好时,?#19988;?#24418;的。只有当它工作不良时,才会被人注意到。

    所以,通过展示 5 个明显的坏设计,来反衬好设计是怎么更好工作的,并提炼出一些经验来让我们为用户们创造良好的隐形的体验。

    一、信息过载

    坏设计:洛杉矶的停车指示牌

    洛杉矶(LA)的停车指示牌,可以说是近十年来信息过载的典型代表。它们出了名的难以理解,因为交通规则很复杂,因此在一块小小的区域里要传达大量的信息。

    这些指示牌有多令人费解呢?

    通常来说,它们从 2010 年起典型的样式就像下面的?#35745;?#19968;样:

    作者/版权所有人:Jorge Gonzalez。版权条款和许可:CC BY-SA 2.0

    从LA停车指示牌的历史来看,这个样式已经是相当简单的了。试想周二早上 9 点你开着车上了这条公路。那你可以停在这里吗?

    这么简单的问题竟然要费尽大量的?#29616;?#36164;源去回答!

    作为设计师,我们经常会面对需要在一块小区域里传递大量信息的设计问题。LA的停车指示牌可能是其中最极端的一个例子,但很多时候在移动端应用设计中?#19981;?#38754;临同样的问题。

    那么是否有一个通用的办法可以解决停?#24403;曄都?#31867;似的设计问题呢?

    好设计:Nikki Sylianteng的停车指示设计

    设计一个可以展示所有信息,同?#27604;?#26131;理解的的标示牌听起来?#19988;?#20010;不可完成的任务,但这恰恰就是Brooklyn的设计师Nikki Sylianteng完成的。

    作者/版权所有人:Nikki Sylianteng。版权条款和许可:CC BY-SA 4.0

    Nikki的设计试验性应用于LA标识设计中。Nikki的设计有效的原因之一正?#19988;?#20026;它?#19988;?#29992;户为中心的:Nikki意识到驾驶人其实只想知道他们现在是否可以停在这里。

    可以或者不可以,这才是所有驾驶者需要的,所以指示牌也只需要展示这些信息。

    她在设计中利用了视觉?#21019;?#36798;信息而不是文字,结果就是设计极为直观——绿色代表可以停车;红色代表不可以。同时这个设计里还考虑了色盲的问题,所以在不可停车的时间域内用了斜线。

    现在当你看到这块标示时,你就知道周二早上 9 点是不可以停车的,这样的指示牌?#29992;?#19968;眼就能懂。

    所学到的最佳实践:

    • 了解你的用户需要什么,然后基于此设计,这可以帮助减少信息负载。

    • 有大量的信息要传达给你的用户,试着用视觉化元素来替代文字,点击以下链接了解更多数据可视化的知识。

    二?神秘肉式导航

    坏设计:LazorOffice.com

    根据 1998 年Vincent Flanders创建的网页The Suck,神秘肉导航(MMN)用于指代那些必须要用户点击链接,或把鼠标悬停链接之上才知道指向目标的设计。

    “神秘肉”这个短语,起?#20174;?#32654;国公立学校的自助餐厅提供的肉类,因为被过度处理而根本无法辨别出来。

    MMN不好,?#19988;?#20026;它降低了导航元素的可见性。因为用户必须要去“猜”导航的目的地,或者必须要有点击操作,因此增加用户的?#29616;?#36127;载。目前老式的网页设计中还可见到MMN,现代网页设计中已经很少见到了。

    我?#19988;訪azor Office为例——一个提供预?#21697;?#23627;的设计公司网站。

    作者/版权所有人:Lazor Office公?#23613;?#29256;权条款和许可:合理使用

    LazorOffice的官网首?#25104;?#25670;放了这么一组MMN式?#35745;?#27491;如你所见到的那样,这种布?#31181;?#26377;非常少的线索暗示我们将要去向的地方。相反,这 9 张?#35745;?#23601;这样摆放着,令某些用户产生困惑而非发生与之交互的动作。

    在他们主页的下方,一组?#35745;?#32553;略图静静的摆放在那里,它们是可点击的吗?

    是的,它们可以点击,如果你把鼠标移动到这些?#35745;?#19978;,它会变指针的样子,但是当你点击后会发生什么呢?

    “点击后查看”并不是个好的用户体验解决方案。这种设计会会带来的改变是——你的用户会弃用这些导航,而从你的竞争对手那里获得替代的解决方案。

    好设计:Interaction Design Foundation网页的课程卡片

    幸好MMN问题是很容易解决的,关键是意识到你必须清晰地标注链接。仅仅是在鼠标悬停?#26174;?#21152;“查看项目”的弹出提示,就可以提升Lazor Office主页的可用性。

    作者/版权所有人:Interaction Design Foundation. 版权条款和许可:合理使用

    我们的课程卡片清晰标签了链接的去向,我们Interaction Design Foundation上的课程卡片,不仅每张卡片的底部有“查看课程”入口用以提示行动结果,同时鼠标悬停在卡片上时还会弹出“进入课程”的提示语。?#30710;?#32593;站都遵循这一相同的规则,所以你也必须要遵守,那就是最大化你网站的可用性。

    所学到的最佳实践:

    总是标注清楚链接的指向!你?#25442;嵯不?#21507;神秘肉的。同理,你的用户也不?#19981;?#28857;击指向未知的链接。

    相关推荐
    简洁设计是对用户需求透彻理解的基础上去粗取精
    深入谈交互设计之人人都懂交互设计
    产品设计?#21644;?#27700;千山总是情 不要?#35745;?#34892;不行
    产品设计教程:提升用户使用黏性的6个诱惑手段
    中枪了没?设计师最常见的11个设计误区
    从引导页设计?#28783;?谈谈如何提高产品体验
    学多不如错少!五个最常见的设计思维误区
    回顾交互设计发展史:回归人性 重拾质朴
    深度剖析?#27169;?#35774;计追波风!
    产品设计:FEEDLY创始人再聊改版实战经验
    设计与咖啡?#20309;以?#21334;咖啡中学到的产品设计
    让测试成为设计的一部分 做出高性能设计
    如何改善产品UX设计,这5条原则也许能帮到你
    当你思考2016产品与设计创新时 不可回避这10个趋势
    前方高能!别让这10个设计误区毁了你的APP
    “简”与“洁”,产品界面设计?#22351;?#19981;知道的两点
    Design Sprint:谷歌产品设计秘诀
    电商产品设计感想:你真的认识?#20309;?#36710;吗?
    交互设计:利用控制?#26657;?#20026;用户体验加分
    这7个原则是产品用户体验设计的重点
    产品设计过程中对异常流程设计的处理
    微文案:UI设计师的必备技能
    动效教程:产品的动效设计
    产品设计中如何利用弹窗做信息展示、内容拓展等?
    UI设计分享:食谱类APP要如何设计?
    日本产品设计都有那些让人称赞的细节
    每个设计师都需要明白的复杂度守恒定律
    如何设计一款能够打动消费者的包装设计?
    分享:如何才能让你的设计作品耐看?
    30个幽默有趣的404错误页面创意设计欣赏
    分享:网页核心内容对视觉表现的影响
    网页设计的背景创意风格与设计趋势分享
    20+艺术视觉和网页完美统?#22351;?#32593;页创意案例欣赏
    21个带斜线排版设计的网站设计创意欣赏
    55个极具创意的?#21482;?#32593;页设计案例欣赏
    从优秀案例分析网页Banner视觉构成与创意设计

    精彩推荐

    ?#35753;?#25945;程

    任选五走势图
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • <bdo id="g6euu"><blockquote id="g6euu"></blockquote></bdo>
    <bdo id="g6euu"><samp id="g6euu"></samp></bdo>
  • 福彩幸运武林风开奖走势图 3d彩票网站是多少 开什么娱乐场所赚钱 彩票新疆11选5开奖 七乐彩走势图分析 wnba比分直播网 天津11选5走势图前三基本走势图 北京快乐8开奖结果 瑞典二分彩是正规的吗 德州扑克多开教程 大连一方中超赛程 专研彩票公式 nba篮球让分胜负 足球彩票17063投注比例 新浪足彩网