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

文本框是设计工作中常见的组件之一,无论是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

相关推荐

  • 设计书单 | 设计师该如何运用交互设计来满足用户的轻松休闲需求

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放给的再多不如懂我后弦 - 下完这场雨对话全球20位杰出的交互设计师,他们亲自分享关于交互界面设计新趋势的独特观点,大量实用的经验之谈也毫无保留地一一奉上!《NEW TRENDS IN GUI GUI设计新风向》• 收录全球77位优秀交互设计师的GUI作品,多元化的灵感开发。• 全书从应用程序中最火的三大类别——“娱乐”、“社交”、“实用”,对作品内容进行精准整合。【第一章-聊天社...

    2018-02-25
  • 用户体验再度升级,共享租车现里程碑式进步

    近日,国内共享租车领导品牌凹凸租车发布最新APP 4.0版本,该版本通过优化匹配算法和系统功能,在业内首度实现共享租车平台零拒单,免除了用户交易后租不到车的后顾之忧。同时,新版凹凸租车上线了“精选优车”频道,全面提升用户的租车体验。零拒单,用户所租即所得在共享租车行业,用户租车后遭遇车主临时拒单或取消的现象成为一大痛点。在凹凸租车4.0新版本中,平台通过车源端优化、车辆接单标准化、智能推荐匹配算法和系统功能升级,实现了工作时段的无拒单、...

    2018-02-01
  • 亚马逊语音交互设计规范(三)Alexa的回应

    作者:Amazon翻译:原形必录这篇是整个设计规范的重点,因为在设计语音交互时最主要的就是Alexa的回复内容,本篇给出了很多让对话更自然易懂的方法,希望对大家有帮助。往期回顾:《亚马逊语音交互设计规范(一)设计流程》《亚马逊语音交互设计规范(二)用户说的内容》本文讲的是Alexa如何表达能让人们更容易理解和更好的回应。Alexa能够以自然的对话方式来回应、通知,还能问问题。 在设计Alexa对用户说什么时,我们可以参考以下做法。本章目...

    2018-03-18
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • [译]可用性之外:使用劝导式模式设计(上)

    你可能已经有一个很好的产品。你做了可用性设计,你也拥有了几个经常使用你产品的核心客户。然而,这在激烈的竞争中往往并不突出。你的产品具有高跳出率,只有很少的用户会回到应用中,用户比你期望中更快地抛弃你的产品,一般情况下,用户不会深入所有你的产品所提供的体验。

    2017-05-27
  • 【汇总】2015年阿里巴巴交互设计师笔试题目

    经验分享之交互设计面试 从网上各种渠道扒下来有关2015年阿里巴巴交互设计师的笔试题目 按照各方面的信息初步确定一共是四题,基本上都是要码字 要交作品,要交简历(应该是第一题的公共问题) ps:出题应该是一套…

    交互设计 2015-08-19
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • 界面设计 | 如何打造整体性的产品设计方案

    界面设计工作当中的很多纠结来自于怎样在这三者之间进行权衡。对于不同的功能与内容,如果拿捏不清它们各自的特点及适宜的呈现方式,那么你便很难打造出具有整体性的产品设计方案。

    2017-06-02
  • 交互设计与人类行为习惯的一些思考

    在交互设计中,利用很多的人类行为习惯作设计指引,如从左到右的阅读习惯,格式塔原则的视觉习惯等。很多的研究者对此已经深入研究,本文主要围绕习惯与交互设计的联系及相互影响的思考。好的交互设计是培养用户获得更好的行为习惯,更好地解决问题。

    2017-05-26