2.4.10 Design System - Input Text

以前我绝对是对哲学避之唯恐不及的
但某一年意外看到「正义 一场思辨之旅」以及「超译 尼采」後
开始对这一块的知识起了兴趣
後来觉得在 UX 设计上 哲学也是帮助蛮多的
包含要从多面向的思考、不预设立场、好奇心为出发点去挖掘真实情况等等

Input Text 有些设计系统会命名为 Text field
在 Material Design 上拆解成几个部分

  1. Label 标题
  2. Placeholder 提示文字,有时会跟 1 做结合,在 Focus 状态转为标题
  3. Icon 放置於前示意用户要填写的内容或放置於後示意後续的操作行为
  4. Help text/Error message 至於栏位下方

这边举几个一开始做 Text field 容易忽略的事情
标题
如果在多语系的产品,有些栏位标题可能会变得很长,所以在Layout上栏位就不太建议并排或是要有足够的空间给转换语言後的文字长度

提示文字
举个例来说,之前遇过没有放置提示文字的栏位、标题是 Position,当时就有部分用户填写地址、部分用户填写职位
有提示文字除了可以避免用户填错资料外,也可以利用提示文字告诉用户一些填写的规则,比如说:密码规范最少要几个字元

(注意:标题跟提示文字都要尽量用大众可以理解的词汇,若不是很确定的话,可以多看看几个产品是使用什麽placeholder或标题)

Icon
在这边有点像是辅助角色,比如说要用户填写日期可能会放日历图示、要用户输入金额会放「$」或「€」
Search Bar 则是会有放大镜图示,让用户知道输入後可以进行搜寻的动作
不过要使用什麽样的Icon才能让多数人了解又是另一个学问,毕竟这也牵涉到文化、符号,不同国家的人对於相同的符号可能会有不同的解读

Help text/Error Message
Help text 有很多可能性,比如说牵涉到隐私资讯、金流资讯,为了让用户更理解搜集这些资讯的目的,就会有辅助说明;那看到 Error Message 就可以联想到 Text field 也是有很多不同的状态的
https://ithelp.ithome.com.tw/upload/images/20211004/20142064yzTGiKCgk5.png
来源:Material Design

其他还有像是
密码栏位,要显示明码还是暗码?
Text field 如果很多文字,要怎麽显示?有没有文字上限,有的话是否要显示给用户看?
搜寻栏位要怎麽清除原本输入的文字?用户输入查询文字是否要使用Autocomplete辅助?
这些都是设计上常遇到的问题


实务经验上的小故事

永远要有 B 方案,因为你不知道什麽时後会突然有谁跟你开个玩笑影响了原本的计画
平常也可以多观察产业趋势(推荐创业小聚)或职能趋势,比如说之前因为疫情很多人都体验过了WFH
UX 研究可能也会从面对面访谈转为线上访谈,现在虽然还不是很普遍,但之後肯定会越来越常见
现在设计师不会写code可能会有很多局限,但之前工程师朋友分享一个很酷的东西Sketch2Code,让人不禁开始想像以後是不是可以会画画就好

Day 19 End


<<:  20 APCS 系列文章食用姿势

>>:  Day19 弱点扫描软件安装与使用注意事项

Day 5 韧体的烧录及可靠性

目前嵌入式软件,大部分都是烧录在DDR或SDRAM上面,过去的韧体烧录,非常麻烦,常常会失败,目前大...

NoSQL备份与还原

再来实作所有资料库的重点, 备份与还原. 首先建立备份. 首先实作On-demand backup ...

SQL 语言和你 SAY HELLO!!

第三十天 各位点进来的朋友,你们好阿 小的不才只能做这个系列的文章,但还是希望分享给点进来的朋友,知...

HTTP Client

在 Android 开发如果要用到 HTTP client 的话基本上大家都预设用 OkHttp +...

VSCode 套件推荐系列

身为一名工程师,将文字编辑器打造出具个人风格也是理所当然的。VSCode 是现在主流的文字编辑器,也...