以文本框为例,了解交互设计师在工作中的逻辑思考方法

文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。


文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

以文本框为例,了解交互设计师在工作中的逻辑思考方法

先来做个设计需求吧!

这个设计需求是:我们需要用户填写活动的名称。

第一反应,这个是用来收集信息的,需要用户填写内容,并提交给系统,应该使用文本框。

然后大笔一挥,设计如下图:

以文本框为例,了解交互设计师在工作中的逻辑思考方法

这样就完成了吗?这个设计能交附程序猿开发了吗?答案显示是:NO。

如何全面地思考?

1. 了解需求背景

首先我们需要了解这个需求的背景,多问几个问题。

  • 为什么要让用户填写?这个信息对我们的业务有什么帮助?
  • 有没有办法通过其他渠道来获取这个信息?

2. 考虑组件的基本属性

文本框是最适合收集用户输入信息的组件,用户按照要求输入一定数量的字符。使用这个组件,要先了解它的基本属性。

(1)内容

  • 合法字符:是否支持中文、数字、下划线、特殊符号?
  • 格式:要填写的是邮箱、日期、还是密码?能以数字或特殊字符开头吗?

(2)长度

  • 字数:是否有字数的限制?若输入字数较少,使用文本框。尽量让文本框的宽度比输入量稍宽,从而给用户形成心理预期,填写的内容很简单,降低用户填写的心理压力。若输入字数较多,则使用文本域。

3. 完善流程体验

交互设计师在流程中主要承担引导用户前进的角色:输入前,需要先告诉用户要填写哪些内容,怎么填写;输入时,需要及时的给予帮助;输入完成后,若正确给予鼓励,若错误说明原因。

以文本框为例,了解交互设计师在工作中的逻辑思考方法

具体可以从下面这些方面来考虑:

(1)预先提示

  • 告诉用户输入内容是否有特殊要求(如规定不能使用标点符号);
  • 告诉用户输入的字数是否有要求(如规定只能输入20个字);
  • 告诉用户输入的内容是否要具有唯一性(如用户名)。

(2)合法性提示

  • 输入内容出现不合规的字符提示用户;
  • 输入的字数超出限定的范围提示用户;
  • 输入的内容在系统中已存在时提示用户。

再深入挖掘的话,还有很多细节,如:当用户在输入的最后多敲击了一下空格键,使得在输入框中增加了一个字符,是否要将其自动去除,以帮助用户完成操作。

文章的最后提供具体的案例,设计仅供参考,实际应用时还要基于不同的场景进行状态的增减。

如何提高全面思考的能力?

设计其实是有“套路”可循的:从小的组控件到大的项目都有相似或相同的流程步骤。深谙套路的设计师在这个过程中可以快速的搭建页面或理清流程,并在这个基础上进行不断的迭代优化。快速有效的了解设计背后的套路,提升全面思考的能力,可以从以下几个方面来进行:

1. 平时多积累收集

多看产品设计文档,多研究动态交互过程,多体会同类型的组件,从中可以学到很多同行的设计思考。在这个过程中,督促自己思考为什么他们会这样设计,试着去找到答案,并将其内化为自己的经验。嗯,多记录整理下来,好记性不如烂笔头!

2. 设计过程多体会

有了平时的积累,再遇到相似的设计需求时,就会更容易的从多维度去思考各种可能性。就像上面提到的,首先从用户角度出发,思考这个需求是否必要,用户是否要为此付出成本。其次从基础属性出发,考虑解决方案。最后融合到流程中,针对用户操作的触点,加强引导设计,及时反馈结果。

3. 设计完成多验证

在设计完成后,除了上面带点套路性质的设计思考过程,我常用的验证方法是加入多方,一起验证设计的完整性:与设计小伙伴讨论,收集问题并持续优化。

当然,我们没有办法遍历一个逻辑的全部,比如有些情况下系统延迟反馈,而在设计过程中没有覆盖到。解决方法是:与开发同学保持良好的沟通,有新增细节马上碰,减少遗漏。

设计参考

基于一些背景要求,抛个设计参考。如下图:

以文本框为例,了解交互设计师在工作中的逻辑思考方法

原文:http://www.uisdc.com/interaction-design-text-box

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27485/

(0)
CatherineCatherine
上一篇 2017-05-17 22:36
下一篇 2017-05-18 00:47

相关推荐

  • Day 5 | 关于 [交互设计] 的一些思考

    你知道坚持做一件事的动力是什么吗?除去喜欢,那应该就是大家的反馈与交流。我不会分享干货,也没有能力分享干货,只是觉得有一个平台能够表达自己的思考与想法,并能够和大家交流,这样成长很快不是吗?坚持了几天写完个人思考的文章后,收到很多回复,特别感动的就是收到特别认真的回复hhh,比如:有人问了我一句:交互设计是做什么的呀?其实这个时候自己脑子里飘过很多词,什么用户体验,用户研究啊,UX,UED啊,使用流程啊,人机交互啊,操作逻辑啊等等,就是...

    2018-04-26
  • 设计师升级篇|动感特效轻松get

    新手设计师相较于资深设计师,后者技能更丰富且全动感特效轻松get 面,很多人想要进阶资深却苦于培养新技能,笔者在经手不少视频动效项目后,对于技能进阶颇有心得。

    2017-05-07
  • 【to 交互新人】交互小白别踩这4个坑

    作者: 负如来不负卿   交互设计小白刚踏入这个领域时总会走进一些误区,为了防患于未然一起看看过来人的经验分享吧。   一些经验分享前言 作为一个交互新人,难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过…

    交互专题 2017-08-07
  • 交互设计师的60日计划之第十一天

    今天又是上下午都有会,下午还感冒了…差点忘记写每日,要睡了突然想起来,就拿用研小总结凑个数吧。 20150806 及时给出反馈结果 用户的一些基本特点比起用户体验更注重功能,期望能有更多的功能。开发人员学习能力…

    交互专题 2015-08-20
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • 【干货】用户体验是个什么鬼。

    接上篇文章,我们既然已经了解到了用户需求,且已经为用户需求设计了功能去解决了他们的问题。然而问题又来了,用户依然在用我的竞品,而不用我的产品,这是为什么?

    2017-06-04
  • 你的产品有没有为老年人考虑?

    原文:smashingmagazine 木为艾欧网-交互学堂翻译 如果你在科技行业工作,很容易忘记,年长的人存在。大多数技术工人真的很年轻,所以很容易看到为什么大多数技术是为年轻人设计的。 考虑到这一点:到2030年,在美国19%…

    2015-02-08
  • UI交互设计专业-第三十六期学员作品

    专业:UI交互设计班级:第三十六期学员学员:李银学校:湖南理工学院

    2018-03-12
  • 任务优先级的重要性:为核心任务设计

    作为一个交互设计师,在日常的设计工作中经常会问自己或者产品经理最多的问题就是,“这个功能用户用得多吗?用户主要在什么场景下用这样的功能?他用这个功能的目的是什么?等等”,问这类问题的主要目的是判断功能的优先级,在确定了优先级后再根据它去想办法去简化任务流程以及界面设计。

    2017-05-28
  • Interaction Design - Beyond Human-Computer Interaction, 4th Edition 下载 pdf&epub

    “交互设计呈现在交互设计领域的高度需要全面的和当代的视角。第三版再次确立了书作为该领域的基本教材。“

    2016-09-08