周梦晗设计元素的内外观察输入框篇-方向牌
周梦晗设计元素的内外观察输入框篇-方向牌
周梦晗
本图文从输入框控件作为切入点，分析了元素在设计工作中拆分和重组的过程，以求发现思考精进的闪光点。
设计工具：Sketch
笔记整理：Evernote、Notion
内-控件元素拆分1
向内看：依照设计系统的灵活性需求，拆分基本控件的组成元素，并将同一元素的不同属性一一列举，让所有字段、icon、配色都可以灵活改写。
以选取的输入框为例，可拆分为边框、文案、图标、光标、报错提示，下面以图示来说明拆分列举过程：
边框颜色：默认显示为灰色，报错显示为红色；
以颜色变化标示错误区域，提示用户；
文案内容：按功能可分为提示文案、输入文案、可点击文案、不可点击文案；
提示文案在用户输入时升起至边框上部，不遮挡用户输入文案，依然可进行提示；
图标：按功能可分为光标、清除、警示、密码可见、密码不可见；
将图标格式由PNG替换为SVG，因SVG图标可缩放和自适配，在任意分辨率的屏幕上都可以清晰的呈现；
SVG应用场景：Logo图、不复杂的矢量图、UI组件、信息化图表、图标；
内-控件区域划分2
使用多种设计思路进行控件拆分重组，基于迭代易扩展性基础上，寻求更有效率的方法。
思路一：在元素重组过程中扩展思路，寻求更快速调用symbols的方法，以减少失误。
如对控件进行区域划分，向区域空间中填充不同状态的symbols组合。
思路二：将元素同一尺寸不同状态下的symbols汇总到一个，使用时区分场景进行调用。
状态较少时，调用时比较方便，只需将不需要的元素隐藏，不需要切换控件后再调整；
状态增多时，在控件中的元素越来越多，迭代增加新元素时，所有调整会影响旧元素展示，容易出现人为造成的误差。在调用时需要隐藏的元素也越来越多，比较耗时，易造成错漏；
外-控件元素状态展示3控件内部元素得到有效组织后，可向外延展至不同的状态展示。
默认输入框：有默认态、聚焦态、输入中态、失焦态、报错态；
短信验证码输入框：有默认态、点击获取态、聚焦态、输入中态、失焦态、报错态；
密码输入框：有默认态、聚焦态、聚焦态、输入中态、失焦态、报错态；
外-控件元素交互说明4
充实规范内容，对于核心模块增加细节说明，有核心内容的规范才具备参考价值。
如对输入框限制项作说明
如对调用键盘作说明
如对错误类型作说明
观察的方式5
设计工作中对元素进行有效的内外观察，在不断拆分和重组过程中找寻更有效率的应用方法，但是要保留一定灵活性，只需对重要元素进行规范，如色彩、按钮、字体、间距等重要内容。实际使用中需要设计师根据具体情况具体分析，作出更适合当下的设计。
方向牌
设计无边界
upupdesign