在互联网产品中,表单一般被用作数据采集的工具,常见于很多B端后台产品、业务系统等场景,C端注册、登录、购物结算、个人信息填写、问卷调查等场景中。表单是用户输入的主要窗口,也是用户购买、注册等过程中必不可少的关键环节,对于产品的商业目标产生着巨大的影响。
00表单展现的形式
表单出现的形式,与输入空间的大小、上下文之间的联系等有很大的关系。
新页面:在新的页面显示,一般搭配面包屑导航使用,适合独立的主题、输入大量的数据。
模态弹窗:模态弹窗的形式,减少了页面跳转,也能让用户保持对输入部分的关注。但不适合层级较深的输入。弹窗之上再出现弹窗,过多的层次会导致用户失去方向感。
滑出:从页面的四周划入页面,与触发部分的上下文联系较为紧密,空间较大。
弹层:比模态弹窗更轻量,适合快速、简短的编辑与输入。
内嵌:不展开新的页面,而是将下方内容推开,形成一个临时的输入控件,输入完毕即消失。输入部分与上下文联系紧密,整体较流畅。输入部分空间较大,但是页面跳动会比较剧烈。
01表单结构
01-01设计原则
首先,没有人喜欢填表。所以要尽量减少填写表单的时间,减少出错的可能性,减少痛苦。即让人们在最短的时间、准确无误的填完表格所需要的内容。
当表单过于复杂、混乱、提出的要求超出必要的范围时,用户的退出路径会被激活。设计者应当关注人们要完成的事情,而不是为了满足数据库的要求而设置输入框。
知道你的受众是谁
《Web表单设计》一书中说:先考虑人,再考虑像素。受众决定了你问的问题、问问题的方式等等。了解用户的目的才能将之与我们收集信息的目的结合,最终达到让用户愿意填完表单的目标。
考虑情境
任何解决方案都有优点和缺点,要基于情境、目的(减少空间占用、减少页面跳动过大、让视线流动顺畅、增加各部分联系、区分不同选项、提升效率/让用户聚焦等)来综合选择合适的解决方式。
循序渐进
先让人们了解填写表单的收益,他们才会愿意付出填写表单的时间与精力成本。类似于ToC类的服务应用,先让用户明白用上了之后会有什么便利、优点,才会更有动力去注册。在要求填表之前先让用户使用,形成一定的习惯,在必要的时候再要求用户填写表单注册、提供邮寄地址等信息,更能让人愉快地接受。
构建对话而不是盘问:
考虑以对话的形式而不是以盘问的形式来组织表单,可以让用户感觉是在与朋友随意的交谈而不是接受无端的审讯。标签的语言表述亲切、友好,便于用户快速理解,也可以拉近与用户的距离。
减少使用成本:减少打字需求、搜索预测、默认回答、缩短操作路径
减少打字需求:文字输入不仅效率低,还容易出错。如果可以,尽量减少文字输入的形式,可以使用选项、搜索历史、热词、智能辅助输入(定位、OCR等)等形式来获得回答。
搜索预测:基于用户已经输入的部分,给出与之关联的、相近的选项,让用户可以从中选择,减少需要输入的字数。
默认回答:单选框、输入框等控件,默认选择一个/填写了一个可能的答案,减少了一部分人的输入必要。
缩短操作路径:尽量让人们以更少的操作次数完成表单的填写,层级过深的方式会让用户感到繁琐,从而心生反感。
一致性
一致性包括形式、色彩、尺寸、间距、对齐方式的一致性,也包括不同问题地表述风格、必填项/可选项的标记等的一致性。
一致性让用户形成良好的预期,更好的理解问题,可以更快的完成操作,减少因形式变动而带来的干扰。
减少视觉干扰
不同的元素(问题组与问题组、问题与问题等)之间需要有一定的区分,但是要注意过多的视觉信息会导致注意力的分散,对于填完表单这一动作形成干扰。
剔除与表单填写没有直接关系的界面元素,比如采用色彩、字重、字号、间距等取代分隔线、边框等区分形式,可以减少页面中的元素,让人们聚焦于任务,有助于保持完成任务,并消除放弃路径。
同时色彩的使用应当慎重,不要使用过多的颜色导致页面过于花哨而分散人们的注意力。可以使用不同等级的灰色、采用透明度变化等形式结合字重、字号、间距等来做出层级区分。
01-02内容组织
选取问题
用户关心的是问题的内容和为什么要问这些问题,所以不必要的问题应当删除(简约设计中的删除原则/奥卡姆剃刀原则)。
同时,有些需要问的问题也要选择合适的时机,不要一上来就将所有问题一股脑的全部抛给用户,这样只会让用户感到困难、麻烦而产生退却心理。问题的展示可以依据前置问题的回答情况来决定,如选择是否有驾驶经历后,再决定是否显示与开车相关的其它问题。
对于必要当时用户可能不愿意回答的问题,需要作出简短但清晰的解释,消除用户的疑虑。
进度条效应:由易到难、将复杂的过程分解成简单的任务、进程指示-说明填写完成路径
进度条效应:用进度条衡量进展,将参与者的行动与结果联结起来,给予其迅速、频繁、明确的反馈,参与者因受到持续激励而更容易坚持达成长期目标的心理学效应。
将问题按照由易到难的顺序先后展开,有助于增强用户完成整个表单的动力与信心。将复杂的过程文件成简单的任务,可以循序渐进地让用户一步一步完成填写,而不是一开始就被困难所吓倒。也就是“一页只做一件事”的原则,将所有问题按主题分类,在同一页面中只展示同一主题的问题,减少认知负荷。
对于多步骤的表单,通过进程指示告知用户,来显示完成情况,可以让用户看到已完成的部分,也知道距离目标还有多远。可以增强用户信心,激励用户填完长而复杂的表单。对于问题分散在多个页面的表单尤其重要,避免用户中途放弃。
这些就像游戏中的升级打怪,一步一步的引导用户完成复杂的任务。
符合先后逻辑
定义问题的先后顺序,先问什么,再问什么。可以形成对于用户的引导。
问题之间有区分
通过间距、分割线、色彩、分页等形式,在视觉上将不同问题区分,可以更加清晰的展现表单的结构。用户浏览过程会更加容易将标签与对应的输入框联系起来、也不易出错。
内容分组
将问题分组,组与组之间有一定的差别,便于扫视,结构也更清晰。同一主题的问题归纳到一起,比完全平铺更有层次感。也便于用户对全局有一个大的把握。
对移动端而言,内容分组之后,同性质的内容可以一起在弹出的sheet页/展开的选择控件中完成填写。由于在需要时才展示相关内容,可以让人们聚集于当前任务,节省空间。同时,不必每次点击一个输入框,键盘就弹出弹入一次。整体更加流畅、效率更高。这样,一个复杂的表单就被切割成多个细小、独立的表单,减轻人们的认知压力。
划分成多个任务让支线流程更加独立,在支线流程内部用户更加专注与聚焦。从整体而言,主线流程显得更加简洁,更加顺畅。
内容分组之间要注意区别,但是也不能喧宾夺主,影响整体之间的完整性、流畅性。过多的视觉信息会导致注意力的分散,弄巧成拙。
对齐-视线流动
标签、输入框之间的对齐,可以让视线流动的轨迹更加顺畅,方便人们快速识别问题、进行回答,减少填写表单所需要花费的时间、精力。
同时,尽量使用单列布局,避免多列排布,也是减少视线左右跳动所花费的时间。
01-03细节优化
表单的命名
表单的名字就是告诉人们在填什么表单、填完以后能干什么,这是提供清晰路径的一部分。
起始页与填表说明
起始页和说明就像是人们在初次见面时的自我介绍,在问问题之前,让对方熟悉自己,才不会因为心存戒备而拒绝交谈。一方面在复杂的诸如认证一类的表单中,可以提前告诉人们需要准备什么资料,让人们不会在填写过程中因为资料不全而被迫中断整个流程。另一方面,对于比较长、复杂的表单,也可以告诉人们如何开始,大概需要多久可以填完等,让人们有一个心理预期,预留出充裕的时间,也不会因为感觉看不到尽头而半途而废。同时,可以提前告知人们填完后有什么好处,用户在付出成本之后有所收益,才会激励他们填写表单。
问题的表述
问题的表述最主要是让人们快速理解你要问什么问题、你的目的是什么。主要目标是减少用户理解的时间与精力成本。因此,问题的表述所遵循的原则包括:言简意赅、拟人化、减少被动句、删减无意义的词语、使用短句而非长句、仔细检查
言简意赅:问题的表述应当简单、直白,用最简单的表述形式,减少理解问题所花的时间与精力。
拟人化:问题表述过程中,尽量减少冷冰冰的术语,使用”我“、”你“等词语来构建对话感。
减少被动句:被动句的表述让人们理解上更加吃力一些,表述也会更长。
删除无意义的词语:在表达清楚的前提下,让标签尽可能简短。就像海明威说的:“我站着写,而且用一只脚站着写,使我处于一种紧张状态,迫使我尽可能简短地表达我的思想。”
使用短句而非长句:短句比长句更好理解,更加符合言简意赅的原则。
仔细检查:可以让不同的人参与进来审视表述的问题,尽可能让不同思维方式的人都可以快速理解。
Tab键跳转优化
每个人的使用习惯不一样,当使用Tab键进行焦点切换时,页面会因为焦点的变化而跳动。所以需要合理的安排访问顺序,避免页面上下频繁、剧烈的跳动,影响对于问题的定位、识别。
提供中途保存/自动保存
对于冗长、复杂的表单而言,用户在填写过程中有可能因为其他事情而中断。尤其对于移动端用户而言,流程被电话打断、因网络变差而无法继续填写的情况会更加显著。这时候需要提供可以保存草稿/自动保存的机制,让用户下次可以从当前的位置开始,而不是将前面付出的努力白白浪费。
行动召唤按钮
行动召唤强调的是执行这个操作,会产生什么结果。文字的表述需要从用户的角度出发、清楚的描述动作的意义。如将“试用”改成“开始我的试用”等语义清晰的表述方式,可以消除人们内心的疑惑,增强用户的点击意愿。
感谢/完成反馈
完成时应该有一个结束的标志,就像两个人交流后的道别/致谢。
02表单元素
表单的基本元素:标签、输入框、动作、帮助文字、错误与成功反馈
标签
标签是发问的方式,讲究语言自然、清晰、简洁、易懂。
标签的位置分类:顶对齐、左对齐、右对齐、输入框内标签、框内悬浮
顶对齐:视线流动距离最短、最流畅,适合标签长度灵活多变的情况,但横向空间的利用率不高。
左对齐:标签之间左对齐,在与输入框的距离上会形成长短不一的间距,从上到下的扫视不够流畅。与顶对齐标签相比,可节省纵向空间。适合需要仔细、专注每一个问题的输入场景。
右对齐:标签之间右侧对齐,与输入框的距离保持一致。上下扫视比左对齐更快。
输入框内标签:节省空间,但是输入过程中会消失,增加用户记忆负担。适合单个输入框,如搜索场景的使用。
框内悬浮:与传统的框内标签类似,但是输入过程中不会消失,不会造成填写过程中忘记问题是什么的困扰。标签与输入框融为一体,减少了线框对于视线的阻隔,视线流动顺畅、自然。
输入框
输入框是用户回答问题地方,承载用户的输入行为。输入框的形式决定了用户的操作方式,要尽量让操作方式与答案的形式更加贴合,方便用户更快、更准确的操作。
输入框的长度可以作为affordance(可供性),与需要输入的内容长度对应,提示用户需要填写的字符大概长度。
控件选择的参考因素:1、可供使用的空间。2、用户的电脑使用经验。3、用户的领域经验。4、通用的形式。5、可用的技术。《Designing Interfaces (豆瓣)》
输入框的形式分类:文本框、下拉菜单、复选框、单选框、开关、计数器、滑块、文件上传、评分、穿梭框
文本框:主要用于输入字符,可限制格式(如字母开头/纯数字等)。但面对银行卡、电话号码等场景时,应当注重包容性,对于“-”等可以后台去除,而非强制用户修改。
下拉菜单:可单选,也可多选。当备选答案数量较少时(一般是7个以内),建议使用单选框/多选框的形式,将答案平铺展示;当需要提供备选答案而选项较多时,下拉菜单可节省屏幕空间。选项数量过多时,要考虑答案的排序方式符合某种规律(如频率递减、首字母排序等),同时可考虑级联、分组等方式对内容进行组织,也可以采用增加搜索框的形式快速选择。
单选框:将被选回答平铺,各选项之间互斥,只能选一个。最开始的时候,会默认选择一个。
复选框:可以多选,与下拉框相比,将答案平铺,更加便于选择。选项较多时建议将选项分组。占用空间较大。
开关:适用于两个互斥选项之间的选择。操作比较方便。注意标签的表述要语义明确,使用主动语句而非被动语句。
计数器:点击按钮可以按某种固定数量级精确增减数字大小,常见于购物车增加商品件数。也可允许用户直接输入。
滑块:用于数值调节,可以垂直布局/水平布局,常见的场景如音量调节等。与计数器相比,调整速度更快,但是精确度差一些、占用空间大一些。
文件上传:点击后会打开系统对话框,选择文件。可以只展示预先限制的文件类型,方便用户快速选择。选择之后出现已选择的文件列表、上传进度等。
评分:粗略的数值,一般有辅助文字描述分数。常见的如豆瓣的几星评分,一般只允许整数(1-5),图标可采用不同形式,如️、、等。
穿梭框:从大量的选项中选取部分或全部作为回答,选项较多时,可增加搜索框、分组、以某种特定方式排序来增加人们检索的速度。占用空间较大。
输入框的选择原则:一目了然、减少打字输入、提供直接编辑功能和推荐参数
一目了然:当用户看到输入框时,需要能够理解输入框该如何操作,是输入还是选择还是拖拽;对于提供备选答案的输入框类型(下拉、单选等)。首先,备选答案的表述要让人容易看懂。其次,对于被选答案数量较少时,最好将答案平铺展开,如采用开关/单选框/多选框代替下拉框。
减少打字输入:手动的打字输入难以避免出错,且效率较低。可采取一些选择/自动获取的方式来减少这种需求。如充值时预设金额而非手动输入金额;在日期选择时使用选择型控件而非输入框;使用语音输入;采用OCR技术录入银行卡号;利用定位技术自动填写地理位置;用上下文的信息自动补全未填部分信息等。既可以提高操作效率、也可以减少用户的操作强度、降低出错率。
提供直接编辑功能和推荐参数:提供默认推荐值,减少用户的输入。同时,在展示数据的位置即可直接编辑,减少使用弹出框的形式打断用户的操作流程。
输入框的必填提示原则:标明少的那种、内部保持一致性。
标明少的那种:必填项较少时,标明必填项。反之,标明可选项。
内部保持一致性:同一个产品页面之间最好是保持同样的标注风格,即都标注可选项/都标注可选项,标注的形式、位置等也保持一致,才能让用户一目了然。
其它:智能键盘、输入组、弹性输入框、可视化、微交互
智能键盘:对于移动端而言,打字输入空间较小,效率较低。可以采用智能键盘的形式,如输入金额时弹出数字键盘;输入地址时,弹出地址选择的控件。可以提升输入效率。
输入组:将具有关联意义的输入框放到一起,可以帮助用户更好地理解问题。
弹性输入框:输入框对于回答具有包容性,允许用户使用不同的格式,通过后台的转换得到标准的结构化数据。如电话号码输入中允许使用“-”符号/使用“+86”字样而不报错。
可视化:采用可视化的反馈形式,可以增加趣味性,让用户在填写表单过程中心情更加愉悦、心理感受的时间与难度更低。如采用“笑脸”、“哭脸”来反馈用户打分的结果,用“绿色”、“红色”灯来标明设置密码的强度等级。
微交互:通过细小的动效,让页面、输入框之间的切换显得更加流畅。表明不同页面之间的层次关系;增加填写过程的趣味性。
动作
动作是用户填完表单后采取行动的按钮,一般是结束填写表单的标志。
动作可以分为主动作和次动作。
主动作:完成表单最主要的动作,如提交、搜索、登录等
次动作:较少使用的动作,一般与完成填写表单的任务相悖,如重置、取消等。
设计原则
主、次动作之间在视觉层次上应该有所区分,强化主动作的视觉表现、减少次动作的视觉表现,方便用户顺畅的完成填表任务的最后一项工作。
动作按钮应该通过状态来引导人们的行为,而不是文字提示(如使用不可用状态来代替点击后提示”不可操作“)。预防出错而非事后指出错误。
动作按钮的文字表述应当清晰、直白,表明动作的意义。如使用“注册”、“登录”代替“确定”。
动作按钮的位置分类:web:位于右侧、左对齐、居中对齐、右对齐;
位于右侧:输入框数量较少的场景,如搜索页面。
左对齐:与输入部分左对齐,适合单列布局的形式,视线流动快速、顺畅,便于扫视。
右对齐:与输入部分右对齐,一般常见于后台搜索页面,多列展示的场景。
居中对齐:与输入部分居中对齐,视觉上较为均衡。如常见的登录页面。
移动端:右上角、表单底部、固定底部、随键盘移动
右上角:较为常见,不影响用户填表的流程。但是填完之后视线需要从下移动到上方。操作上也不是很方便,适合于需要仔细确认的表单。
置于表单底部:符合视线流动的顺序。当表单较短时页面显得比较简洁,当表单较长时会引导用户全部填完。填完后即可提交,适用于不需要过多检查的表单。
固定底部:按钮固定在底部,用户的视线流动顺畅,但是键盘弹起时会遮住按钮。适合于最后为非文本输入类型的表单。
随键盘移动:与固定底部相比,固定在键盘的上方,不会被遮挡。效率较高,适合于最后为文本输入且提倡快速提交的表单。
帮助文字
帮助信息就像是讲解员或说明书,应该尽量少的依赖表单中的帮助文字,因为大段的说明会让人感到压力。就像服务条款,很少会有人花时间去认真读完,也不利于人们填写表单。所以,帮助信息应该简短、有效。
帮助文字形式分类:表单中的特定位置、与输入框相邻、放入输入框中、悬浮提示。
表单中的特定位置:一般是开头的位置,或者单独在顶部/左侧/右侧有悬浮窗形式显示帮助文字。可以告知人们需要提前准备哪些资料,让人们有所预期;或者告知人们填完后有哪些好处,激励人们完成表单。可以在激活表单时显示,然后由用户选择关闭。
与输入框相邻:与标签同时显示,一般为提示可选项,或者解释标签含义;激活选框时出现,一般为解释标签或者提示如何填写。
放入输入框中:作为占位符类型的提示,在输入过程中会消失。如搜索框中的”请输入姓名查询“
悬浮提示:使用问号“?”图标的形式,用户鼠标放上去之后显示帮助文字。常用作对于标签含义的解释/为什么需要收集该项信息的说明。
帮助文字的作用:
1-解释:解释标签的含义;解释为什么需要收集这些信息。
2-提示:告知用户需要准备哪些资料、需要多少时间;在具体问题时提示用户如何填写;在填写敏感信息保证用户的信息安全,让用户安心。
错误与成功反馈
错误反馈的要点:让用户注意到;告知出错原因;告知出错位置;提供解决方案。按照谷歌的原则,可以归纳为:简洁、清晰、有效。
让用户注意到:一般使用红色文字提示,可考虑加上图标、输入框变红、加粗等形式变化结合来增强视觉提示。
告知出错原因:描述应当简单、易懂。出错后用户的心理一般会较为急躁,因此,错误提示需要安抚用户并尽可能让其容易理解。
告知出错位置:可以采用视觉关联或者位置邻近的方式。视觉关联:反馈文字与输入框颜色一致;输入框边框变化、字体变化。位置邻近:错误提示出现在输入框旁边。这种形式要注意表单超出一屏时,用户不能及时发现出错位置。
提供解决方案:提示出错后,用户的填表流程就会被打断。这时候需要告知用户如何方便、快捷地修改这个错误,以便顺利回到填写表单的流程。除文字提示外,也可以提供快捷解决方案供人们选择。如名字重复时提供可用的近似性名字等。
成功提示
在顺利填写结束之后,可以对用户提出感谢、鼓励。或者引导用户进行后续的分享动作。
就像《设计师在未来具备什么才能不被淘汰》一文中指出:用户不仅仅是消费者,也是产品的传播者与共建者。一般完成表单的一刻,用户会有满足感、成功感,我们可以借助用户的分享行为,形成品牌传播的效应。
03表单的交互
及时验证
在用户填写表单过程中及时给予反馈。作用:确认回答是否合适;建议有效回答;限制提示。
确认回答是否合适:提示回答是否符合要求的特殊的格式(如必须为英文)、特殊的规则(如最小为6位)等。可以减少“由内而外”的设计带给人的困扰。
建议有效回答:在用户填写时依据用户的习惯、输入的部分数据等提供有效答案,如搜索联想、密码建议等。
限制提示:对于回答具有明确限制的,在用户输入过程中给予及时的反馈,让用户有所预期。如具有字符数入长度限制时,提示还可以输入多少个字符;注册过程中输入密码时,实时提示密码的安全等级。
减少输入
尽量减少输入,是减少用户使用成本的一种方式,节省用户精力,更好更快的的完成表单。减少输入的方式有:个性化默认、智能获取、通过前置问题获取答案。
个性化默认:老用户在使用过程中,会形成一些基础的信息与习惯数据(收集这些数据时要注意符合通用数据保护条例,告知用户并获取用户同意),在填写过程中直接默认填上,会减少用户需要回答的问题数量。如收货地址可以使用默认的地址,而不必每次都填写;登录时用户名会被记住等。
智能获取:利用现有的技术条件,避免打字等输入方式,提升用户的操作效率。如利用OCR技术输入卡号、利用系统定位输入地址、利用语音、拍照输入等快捷形式。
通过前置问题获取答案:用户在填表过程中已经填写过的回答,可以被使用到后面的回答中。
额外输入
简单的选项可以满足大部分的需求,但是有些情况下,需要提供更多的输入选项来满足某些特殊的情况。如输入多个电话号码、多个地址、选择项特别多等。
额外输入的方式一般有:即时增加、叠层、循序渐进
即时增加:点击“+”按钮,即可增加一个输入框,也可以动态删除。满足数量不同的需求,也不妨碍不需要的用户。
叠层:即时增加的输入框位于当前表单的Z轴上方,填写完后,只显示填写的结果,没有额外的输入框。视觉上更为简洁。
循序渐进:即级联展示/分层展示,选择某一项之后,再显示它的下一层,这样一层一层的递进。可以减少一次展示的信息量,减少认知压力,方便用户快速作出选择。
基于选择的输入
依据前置问题的回答不同,后续的问题也会有所差异。这种弹性的输入方式,会形成不同的分支,可以满足不同人的需求,又隐藏了无关的输入框。
前后输入的展现方式可以分为:页面级选项、水平选项卡、垂直选项卡、下拉列表、单选按钮下方显示、单选按钮内显示、显示非活动选项。
页面级选项卡:将不同的问题放在不同的页面中,一次只问一个问题,可以灵活地形成多个分支,也有助于用户聚焦。但是问题之间的联系会减弱。
水平选项卡:将不同的情境通过水平选项卡分类,用户可以选择某一类之后再回答该主题的下的问题。但是对于个选项卡之间的互斥关系,用户可能难以快速理解。
垂直选项卡:与水平选项卡类似,只是选项卡的按垂直方向排列。视线流动的流畅度优于水平选项卡。
下拉列表:下拉选择某一主题后,再显示该主题下的问题。主题只显示当前被激活的,易于用户聚焦。缺点时不能一次展示所有一级主题。
单选按钮下方显示:单选按钮选择某一主题后,再显示该主题下的问题。所有的选项始终可见,需要有视觉提示主题与主题下问题的关联关系。
单选按钮内显示:单选按钮选择某一主题后,在被选择项的下方展开该主题下的问题,就像是内嵌到单选按钮中。主题与主题下的问题关联关系很清晰,但是切换选项时,页面的跳动比较大。
显示非活动选项:将所有主题下的问题全部展开。占用空间大且层级关系不清晰,导致选择效率低下。不推荐使用。
文章结构
参考
万字干货!从 420 万表单里总结的 46 个表单设计方法 | 优设网 - UISDC
可能是最全面的表单设计完全手册! | 优设网 - UISDC
超全面!13种表单样式的设计方式都在这了 | 优设网 - UISDC
设计表单的时候,为什么悬浮式标签体验更好? | 优设网 - UISDC
16个优点告诉你,为什么表单设计应该用这个方法? | 优设网 - UISDC
设计师在未来具备什么才能不被淘汰? | 优设网 - UISDC
关于保存功能的设计,这篇可能是最全面的总结! | 优设网 - UISDC
用3个案例,让你学会移动端的长表单设计 | 优设网 - UISDC
如何高效完成表单输入?来看这个实战案例! | 优设网 - UISDC
谷歌都在招的用户体验文案,如何提高17%的转化率? | 优设网 - UISDC
产品简化改版怎么做?资深设计师的 21 条实用建议 | 优设网 - UISDC