最怕 UI 冒傻气
我也换过几个公司了，项目也做过几个了，可惜每次碰到的 UI 都是 XX 没脑子的，哎你问脑子去哪了：被僵尸吃了 _( ￣皿￣)/#__*
就像我喜欢听的《三十》---> 2B青年欢乐多，我究竟为谁活着，总感不到快乐，我像个傻子一样重复
为什么，我想过，我一个2B青年为什么不快乐呢 w(ﾟДﾟ)w 自娱自乐都不香了，真的像个傻子一样翻来覆去、一遍遍改一样的代码 Ｏ(≧口≦)Ｏ 为什么，就是因为万恶之源：UI
软件生产虽然不像生产线那样工位严格、组织严密，但是也是环环相扣的一个流程。上游思想被一步步、一层层、包装、转换、成最终 app。这更像是一个弹性的流水线，所以大家都自嘲码农、搬砖的、拧螺丝的。但是只要有一个环节出问题，有一个环节的人脑子宕机了，大家都会受影响，下游环节尤其明显
我希望下面2张图能帮我把大家带入情节，UI 突然抽风了，后面的 coder 和 测试 就要脑淤血了...
让人郁闷的 UI 日常
1. 茫茫多的颜色值...
啥也不说，先看看这颜色值
<color name="black">#000000</color>
<color name="transparent">#00000000</color>
<color name="black_4d4d4d">#4d4d4d</color>
<color name="black_464646">#464646</color>
<color name="quan_shop_color">#6ec0e6</color>
<color name="gray_747474">#747474</color>
<color name="half_transparent">#88000000</color>
<color name="white_89">#89ffffff</color>
<color name="gray_9d9d9d">#9d9d9d</color>
<color name="gray_989898">#989898</color>
<color name="gray_6d6d6d">#6d6d6d</color>
<color name="gray_fffaf8">#fffaf8</color>
<color name="gray_FFFBF2">#FFFBF2</color>
<color name="gray_E8E8E8">#E8E8E8</color>
<color name="gray_D7D7D7">#D7D7D7</color>
<color name="guids_tv_or">@android:color/darker_gray</color>
<color name="guids_btn_phone">@android:color/holo_blue_bright</color>
<color name="guids_bg_or">@android:color/transparent</color>
<color name="guids_bg_phone">@android:color/transparent</color>
<color name="guids_btn_weixn">@android:color/white</color>
<color name="gray_b4b4b4">#b4b4b4</color>
<color name="gray_ff">#ffcccccc</color>
<color name="gray_cacaca">#cacaca</color>
<color name="gray_e0">#e0e0e0</color>
<color name="gray_f0f0f0">#f0f0f0</color>
<color name="red_e05d5d">#e05d5d</color>
<color name="red_7440">#ef7440</color>
<color name="red_ed">#ed8457</color>
<color name="common_quan_color">#edbb72</color>
<color name="eec293">#eec293</color>
<color name="line_spliter">#efefef</color>
<color name="f57878">#f57878</color>
<color name="ff4040">#ff4040</color>
<color name="colorAccent">#FF4081</color>
<color name="pure_orange">#ff800e</color>
<color name="yellow_ffb770">#ffb770</color>
<color name="right_yellow_1f">#ffba1f</color>
<color name="e3163e">#e3163e</color>
<color name="pure_yellow">#ffff00</color>
<color name="colorPrimary">#ffffff</color>
<color name="white">#ffffff</color>
<color name="fbfbfbf">#fbfbfb</color>
<color name="f7f7f7">#f7f7f7</color>
<color name="main_808080">#808080</color>
<color name="main_fd5856">#fd5856</color>
<color name="main_008EFF">#008EFF</color>
<color name="main_ff0000">#ff0000</color>
<color name="red_FF5001">#FF5001</color>
<color name="main_ffd44a">#ffd44a</color>
<color name="main_f5f5f6">#f5f5f6</color>
<color name="main_ff673e">#ff673e</color>
<color name="main_c3c3c3">#c3c3c3</color>
<color name="main_3c3c3c">#3c3c3c</color>
<color name="main_fffcf4">#fffcf4</color>
<color name="main_616161">#616161</color>
<color name="main_a87c1c">#a87c1c</color>
<color name="main_615c4c">#615c4c</color>
<color name="main_86784b">#86784b</color>
<color name="main_fffbec">#fffbec</color>
<color name="main_ffeba1">#ffeba1</color>
<color name="main_fafafa">#fafafa</color>
<color name="color_EFEFEF">#EFEFEF</color>
<color name="color_FA415B">#FA415B</color>
<color name="color_F93A54">#F93A54</color>
<color name="color_FF1D00">#FF1D00</color>
<color name="weather_color">#FF1D00</color>
<color name="weather_text_color">#5C584C</color>
<color name="gray_9B9B9B">#9B9B9B</color>
<color name="gray_d6d6d6">#D6D6D6</color>
<color name="gray_FBFBFC">#FBFBFC</color>
<color name="gray_F3F3F3">#F3F3F3</color>
<color name="gray_F5F5F6">#F5F5F6</color>
<color name="gray_F8F8F8">#F8F8F8</color>
<color name="black_515151">#515151</color>
<color name="call_phone_bg">#FF9500</color>
<color name="call_recently_bg">#FD6F21</color>
<color name="switch_btn_bg">#6EDD6E</color>
<color name="smart_life_bg">#F5FCFF</color>
<color name="one_key_net_bg">#FFF9F5</color>
<color name="gateway_setup_text">#EF7440</color>
<color name="gray_7c7c7c">#7C7C7C</color>
<color name="gray_aeaeae">#aeaeae</color>
<color name="gray_bfbfbf">#BFBFBF</color>
<color name="gray_9C9C9C">#9C9C9C</color>
<color name="gray_F0F0F0">#F0F0F0</color>
<color name="gray_818181">#818181</color>
<color name="black_4D4D4D">#4D4D4D</color>
<color name="tab_selected_color">#FFB246</color>
<color name="my_equipment_tab_bg">#FFFDF3</color>
<color name="equipment_place_bg">#ED8457</color>
<color name="index_title_bar_text_color">#272727</color>
<color name="inner_goods_bg">#FCFCFC</color>
<color name="weather_blue">#0085FF</color>
<color name="gray_808080">#808080</color>
<color name="origin_EE7643">#EE7643</color>
<color name="iit_default_selected_text_color">#0086ff</color>
<color name="iit_default_deselected_text_color">#333333</color>
<color name="color_FD5656">#FD5656</color>
<color name="color_FFB362">#FFB362</color>
<color name="color_9B9B9B">#9B9B9B</color>
<color name="color_929292">#929292</color>
复制代码
大家有啥感想没有，UI 出图也不给颜色值，说过多少次了，就说让开发自己吸去，还说我们懒。可是 UI 出的那图给颜色也太随意了，大家看看我们吸出来的这些颜色值，一个灰色就有十来种。项目也不是一个人开发的，混乱、茫茫多的颜色让我们每个人都无所适从。从给颜色命名，大概能感受到当时我们内心的绝望吧，鬼都不知道这个颜色是给谁用的，怎么起名那是死了无数脑细胞啊，后来我们都绝望了，随便起名了，规范啥的都见鬼去吧...
转折111111来了 --> 突然有一天 UI 说，要让我们改颜色，下划线的灰色统一改成其他颜色，o(≧口≦)o 这就是我当时的心情，你妹的给项目搞得这么乱，谁知道哪个、或者哪几个灰色是下划线用的，我说你告诉我哪个改成哪个，他不管，这是开发自己的事，也的确是我们自己的事，但是这锅我们不背
转折22222来了 --> 突然有一天 UI 说，我们要上夜间模式，改 NMB，啥样自己心里没点数嘛，怎么改......最后还是逃不了。整整3天啥也没干，每个 view 挨个对颜色值、改颜色值。改完了总觉得哪里不对，但就是找不着，UI 说就这样吧......
2. 就是不走寻常路...
找不到之前的切图了，我就文字描述下吧。3种类别的商品页面，每个页面都有一个显示商品描述信息的 viewGroup。大家可能想不到，3个页面的这个 viewGroup 居然张的都不一样。还不是彻底不一样，而是内容 tab 都一样，但是 tab 之间的位置不一样
我去问 UI 为啥不能设计成一个样子，这样我好做成公共组件复用。UI 说我想怎么画就怎么画，我从来不走寻常路，就得不一样才能体现出我的设计能力
3. 我忘了之前怎么画的了...
还是上面这个用来显示商品文字信息的 viewGroup，过了很久新添加一种商品类型，页面要新作。新的商品页面也有这块内容，但是设计稿拿过来一看，不光 tab 之间位置依然不一样，部分 tab 还换了
去问 UI，相同级别的页面为啥新的和以前的设计差距这么大，用户看了感觉岂不是很突兀、很别扭。UI 说时间太久了，忘了之前怎么画的了，从心随便画画...
大家不知道当时我这个心情啊，也就是以前脾气好，放现在直接拿键盘开抽。这样的设计真是只能处处 copy、 处处改，根本就没有整体考虑，页面一多，别说我就是 UI 他也分不清哪对哪了。抽象公共UI组件想都不要想，页面复用那都是没有的事
4. 看着就是别扭...
我司的 UI 非常有个性，就是追求和别人不一样，飞得反着来，举个例子，页面间距从来没有统一过，时间久了找不到设计图了，我记得公司邮箱一直有用户反馈，app 看着就是别扭...
我理想中的 UI
像上面这样的事多了，很多都想不起来了。我第一家公司碰到的 UI 简直极品，后面的虽然没这么变态，但是也没好到那去 (* ￣︿￣) 就没有靠谱、真正懂设计的 UI 让我碰到吗？难倒非淂进大厂才行，我非常期待高水平的 UI 设计师，想看看这样的人是怎么工作的 ヾ(≧O≦)〃嗷~ 学习一下
作为软件生产流水线中最重要的一环：开发，其他环节都应该向开发靠拢。尤其是和开发联系至关紧密的 UI 设计，我希望 UI 能和 coder 一道拥抱相同的开发思路，这样才能设计出符合代码开发规则的 UI 设计稿，才能让开发飞起来，才能满足未来复杂多变的需求变化
和 UI 撕逼、互喷、键盘互怼，这些日常互动就不说了，我希望 UI 设计师是下面这样的 ┗|｀O′|┛ 嗷~~
首先遵循一致性原则
我摘取一部分
我们遵循一致性原则的目的是为了减少用户认知负荷，用户能够轻易上手使用产品，熟悉的导航路径，熟悉的设计模式，不要搞那些让大家猜不到，搞不懂的设计
-
重复间距：image
<figcaption></figcaption>
-
重复控件： -
布局规则：
其次要有组件思维
前端早就诞生了组件思想，UI 作为设计前端的难倒不应该遵循组件思想嘛~ 还好设计界早就诞生了组件思想，我很喜欢这篇文章，一直保存着，捧为至宝：基于组件的设计方法
核心思想就是 UI 设要和前端开发一样，以组件为核心要素，在组件的基础上构建自己的风格，可以设计多个风格，风格之间的切换应该便利，不应该给开发带来巨大的额外负担，否则就是 UI 的不合格
实际基于以下6个部分思考：
一致性(Identity)元素(Elements)组件(Components)构成(Compositions)布局(Layout)页面(Pages)
1. 一致性(Identity)
是指 字体、排版、主色、辅助色，这些都会被详细规定好，定义之后，这些规则将会在整个项目中贯穿执行
2. 元素(Elements)
是指 按钮、链接、输入框、下拉框等等，它们的样式、状态都是需要被定义好，比如按钮悬停、获得焦点、禁用的状态，一旦定义了（这些元素），就要在整个项目中循环重复使用它们
3. 组件(Components)
是指 工作中主到次都分成组件（Components），当我们设计 app 或者 web 的时候，在页面上最多的就是组件，一个组件至少需要几个元素构成。譬如像卡片、导航栏都是一些常见的组件，这些组件贯穿整个系统要模块化使用
4. 构成(Compositions)
是指 多个组件组成了构成，就像不同 item 组成的列表，贯穿整个系统我们也要模块化、循环使用他们
5. 布局(Layout)
是指 页面应该遵循统一的排版原则，让页面之间看起来协调一致
6. 页面(Pages)
是指 在整个项目的维度，我要也要模块化、复用这些页面
基于组件的思想，对 UI 设计师要求很高，但是对于后面开发环节至关重要，可以节省大量开发和之后调整的时间，最重要的是让 UI 的变化不再是个令人讨厌的负担
再次基于全局构建自己的风格
在前面组件思维基础上，我希望 UI 可以站在整个 app 的高度，统一构建自己的风格出来，不要再让 coder 去猜、去懵。正是由于 UI 不愿意、不配合、自己没有清晰的认知，才给下游部门造成负担，这种负担会逐级递增。这也算是沟通失效带来成本提升的一种体现
UI 一样也要有自己的 UI 设计文档，下面的图找的可能不是特别合适，大家脑补理解 ヾ(≧O≦)〃嗷~
1. 要有整体颜色标识
必须明确：哪种颜色给哪种 view、哪种级别、哪种场景使用，然后清晰声明出来
2. 要有整体文字大小、页面排版、间距标识
必须明确的给出上述所有参数，并图示
3. 颜色应用要相互配合、成体系、最终汇聚成一种风格
必须明确：每种风格的颜色搭配要有明确的示意图以便其他人理解
4. 要基于整体构建组件并在整个app、甚至全平台复用
必须明确：这点对于 coder 至关重要，只要 get 到 UI 设计的点，那么就能精准构建公共 UI 组件库了，可以减少不少重复工作，代码能看着也能干净不少。更重要的是可以在 app 业务确定之前，就开始构建出 UI 框架，真正的实现敏捷开发
一些细节，比如 dialog 也要有基于全局考虑，并给出图示：
5. 最终要结合颜色、组件，每一种风格要给出图示
这个不好找图，这张大家凑合看吧，脑补下~
6. 要统一整体的 icon 设计、圆角、阴影、大小等
我非常喜欢下面图中自如的设计感觉，看着很讨好眼镜，看着不累
7. 最好能在整个公司、业务、平台发展的角度设计
UI 设计师经过充分的和产品、业务、管理讨论后，应该明确理解整个产品线，UI 设计要基于整个产品线展开。要考虑有几个 app、哪些 app 先开发、哪些 UI 组件、页面要整和到整个平台使用。这些要明确的给到 coder，设计 app、平台框架时要充分考虑 UI 给出的指导：哪些组件是公共 moudle；公共 moudle 的设计、编写、规范；view 的替换、复用、无痕切换、热修复；开发组织等很多问题...
我理想的产品
说到这里，不光是 UI，产品我也想吐槽下，我希望产品能提供更加详细的文档、图文资料。我司业务流程图，产品总是在原型图写几行字就完事了
1. 业务流程图/功能泳道图
我希望是下面这样的，难倒只有进大厂了吗？但是大厂不要我呀 ( ＿ ＿)ノ｜
2. 页面流程图
这个其实很重要，新人进来、同组人员交换业务都非常需要这张图，能大大提高我们熟悉代码的速度
3. 页面交互示意 GIF
说真的有时真的 get 不到产品或是 UI 的交互的思路，我多么希望产品、UI 能提供一个 git、或是演示，让我省省脑细胞，一个 gif 胜似万千文字，一图道尽所有，简单快速有效
最后
没了，就写到这里了。阿里土话：当你觉得不舒服的时候，就是成长的时候。 一个人四平八稳时，很难获得成长。我现在没事会尝试写写那些不熟悉的领域
写这篇文章虽然有经验可用，但是也是看了很多讲产品的资料，吸收了一些知识才总算是把自己的想法写出来。这篇博文也是耗费一番心血，写完之后感觉豁然开朗，眉头的阴云都消散了一部分~
作者：前行的乌龟
链接：https://juejin.im/post/6876762944911179784
网友评论