[自译]设计模式和起源

原文地址:Design Patterns and Sources

原文作者:Ana Oliveira


设计模式是一种问题在大多数情况下的解决方法,避免去重复造轮子。作为UX设计师,我在设计界面的时候会频繁地去使用它们。当整个世界都在通过一种方式来操作某个功能,改变它通常意味着用户不知道如何去使用它。这也是为什么不同的行为组件,在使用中会产生摩擦。例如:“一个下拉列表页可以是carousel吗?”-我可能不会这么做…错误的使用设计模式会弄出奇异的组件。同样的,当一个新功能在几个场景下被广泛使用时,这也会创建一个新的模式。

在发展的过程中,去了解组件的行为是非常重要的,确保模式能过被正确的使用。我们甚至会注意错误的组件库,因为有些行为并不是根据设计模式设计的,它不是通用的,开发人员会错误的实现它。

命名问题

我曾经听过下拉列表(dropdown list)被叫做组合框(comboboxes),工具提示(tooltips)被叫做模态窗(modals),勾选框(checkboxes)被叫做闪烁(twinkles),按钮(buttons)被叫做图标(icons),单选框(radiobuttons)被叫做勾选框(checkboxes)…这样的例子还有很多。有时候这些不同是因为用户对模式的理解,来自于开发人员对库中组件的命名,这个和设计人员在模式组件中所理解的不同。当然,一个组合框可以被写成下拉列表,但是它们是不同的设计模式,应该表现的不同。当你有疑惑的时候,去设计模式的库中看看组件应该如何工作,或从了解设计模式的人那里得到意见。

最佳实践

只给出组件的正确使用方式是不够的。好的组件结合会让界面操作起来更加平滑。UX设计师在选择的时候总会给出合理的建议,不然很可能错误地使用。

我会列举出一些我知道的界面建议,这可能对你会有帮助:

1.哪儿都是默认值

在可能的地方使用默认值。至少有一些用户已经有了他们自己的选择。最差的情况是用户去修改它,如果你把字段空着也会有事情发生。

去选择下拉列表中的选项也是很好的实践。当它不太会有默认值的时候,留下一个输入提示,而不是空字段,就像下面这样。

2.总是让用户知道他们在哪

用户很容易就迷失,选项菜单应该很容易被发现。

在页面层级很多的地方,使用面包屑导航来帮助用户了解当前的位置。

3.组件选择

当你在一个地方有两个选项的时候,radiobuttons可能是最好的选择。

如果你的选项超过了5个,那么你最好选择的是下拉列表。

如果选项超过50个的时候该怎么办?可能你需要选择一个组合框去快速找到正确的选项。

当你有会改变的字段类型,它首先应该符合当前的场景,然后再去适应。

4.列表和数量

在列表中的数字更容易阅读,让他们右对齐的时候,然而,文本应该做对齐。作出不同的调整可以帮助你提高可读性。

你可以自己看看:

顺便说一下,别忘了按队列排序。

5.调整数字

当你处理数据的时候,你知道这可能会成长到上千上万,为数字做好准备。这意味着什么?你需要避免一个大的数字像是这样:

2.112.123(试着大声读出来)

2.1kk,这是不是更好?

当处理这些的时候,你可能需要去对数字进行扩展,但是我相信大多数的时候,用户只是想要一个大致的数字,对数字作出调整可以帮助节省界面的空间,同时增加可读性。

6.无限滚动和页脚

永远不要将这两种混合在一起。如果你想要同时表达这两个,最后只会是一个令人沮丧的结果。在很多情况下我都喜欢无限滚动,但是会忘记页脚。如果你需要加一个页脚。使用分页来替代放置一个“更多”的按钮,在每次的加载后。

7.查阅设计模式的起源

这是一些我目前设计模式的来源,当我有疑问的时候,最适合的一个组件操作是什么,或者是想要获取一些灵感:

http://ui-patterns.com/patterns

http://www.welie.com/patterns/index.php

https://www.pttrns.com/

http://www.mobile-patterns.com/

我希望这些工具和技巧,可以帮助提高一点你的产品体验。你可以去寻找更多的设计模式库,如果你感兴趣,并愿意去挖掘更多的话。这些都是我用得最多的,在这里添加评论,贡献你的经验,也可以解决一些常见的错误使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,090评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,050评论 25 707
  • 我就稀罕小孩,生我闺女那会,自己还跟个小屁孩似的,把闺女往娘家一撂,自己跟老公悠哉悠哉的过二人世界去了。 ...
    北墨猫小渔阅读 318评论 1 1
  • 今天的心情非常沉重!一个朋友,来电话说他的肺部出了状况。 朋友才三十多岁,却在他的身体里长了一个七十多岁老爷爷的肺...
    方雨阅读 421评论 3 2