聊聊我和 UI 撕逼的经历~

2020-09-28 本文已影响0人一个老码农

最怕 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′|┛ 嗷~~

首先遵循一致性原则

资料：UI设计中一致性如何做？看这篇就够了

我摘取一部分

我们遵循一致性原则的目的是为了减少用户认知负荷，用户能够轻易上手使用产品，熟悉的导航路径，熟悉的设计模式，不要搞那些让大家猜不到，搞不懂的设计

重复间距：
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 的替换、复用、无痕切换、热修复；开发组织等很多问题...