在我们设计UI有所疑惑时，可以参照以下标准做法。

这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。

我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。

1. 设计时使用密度像素（dp），而非像素（pixel）

图中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。

设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。

举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。

因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。

2. 间距使用8的倍数（8dp）

为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。

另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。

以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。

有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。

3. 删减元素容器的线框

我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。

我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。

4. 无障碍设计—重视对比度

善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。

设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。

Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。

为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。

5. 基于用户习惯，设计用户体验

为什么有些图标元素会被公认为标准？原因有多种。

假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。

另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。

故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。

6. 善用颜色重量（color weight），建立视觉层次

每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。

善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。

大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。

7. 避免使用超过两种字体

通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。

设计界面时要善用字体家族。

使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。

选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。

8. 让用户认知，而非记住

让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？

结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。

在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。

在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。

设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。

—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）

9. 切忌拖慢用户体验  

作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。

我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）

如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。

关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。

如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。

Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。

这位Dribble用户，非常抱歉把你揪了出来:/

无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》

所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。

10. 大道至简

每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。

谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。

对不起了雅虎，在这必须把你当做不好的案例展示

最后，分享给大家一句我最爱的设计箴言：

臻于完美之时，不是加无可加，而是减无可减。

文章来源：UXRen

年底了，大家有没有在电脑前面忙成狗呢？我身边设计师朋友们可都在冲刺年终 kpi 呢。

但设计需求越着急就越容易出现问题，不少客户爸爸们都抱着一种「没多少时间了，你就这么抄吧」的速成心态，殊不知这样让设计师很为难啊！

粉丝投稿，求问老板让「致敬」时，设计师应该如何应对呢？

当然这种抄袭的事情我们自然不能支持，但从别人的套路中总结出经验还是可以的，为了给大家写出有干货的内容，我收集了喜茶全年的广告海报，做了一个设计风格的总结，方便大家「偷师」（不是抄袭，谢谢）

第一招：港式风格

要说新式茶饮行业最喜欢用的风格之一，莫过于「港式风格」了，毕竟港式奶茶也是新式茶饮行业的扛把子。

港风兼具了：风格强烈/配色醒目等诸多好处，喜茶也在 2019 年多次使用这个风格，例如与阿华田合作的联名款还有后面的阿喜小卖部以及吃瓜公司，还有后续的火锅跨界多肉芒芒甘露等等都采用了港式风格来设计

但其实港风是非常容易操作的，只需要三步就能打造喜茶同款。

下面我们就来看看怎么搞港风设计吧！

谈到配色就逃不出一个核心话题：「港风到底是什么风格？」这就要从香港本土的环境开始说了，香港拥有非常高的人口密度，在闹市区楼宇一栋挨着一栋，店铺的招牌鳞次栉比。

大家日常的生活环境就是每天都被高密度的信息轰炸着，所以店招想要在众多招牌中脱颖而出自然就需要视觉上的冲击，其中便以极其醒目的霓虹灯店招胜出。

但霓虹的制作工艺上，图形与配色都不能太复杂，于是就形成了：手写字体+高饱和配色+简单图形，这样的固定组合形式，港式风格也就此定型。

所以其实只要选择好一个手写字体你就完成了港风的一大半！

然后再选择一个饱和度高的颜色外加基础好看的图形就搞定了，这时你就会拥有一个喜茶同款海报了。

好看的免费字体这里找：

第二招：传统古风

说完了港风之后，第二个经常被 cue 的就是传统古风，而古风中最最最最重要的一点就是定好主基调色，然后选对辅助素材。

而主色调的选择无外乎几种常见的水墨画、工笔画、民国画报等，这些都是古时候我们常用的艺术载体。

而其中工笔画和民国画报因为画面柔美好看、画风具有明显特点成为了现在年轻品牌爱用的设计形式。

当然色调只能展现画面的整体感觉，真正的神韵还是要靠细节来呈现，例如祥云、角饰纹样、圆月玉兔等都是极具特色的。

古风色调+装饰性图案的这种搭配，可以说在产品广告中是非常百搭的，且大部分的产品展示都能应用上，例如喜茶新品的荔枝季还有桂花绿的海报。

△ 喜茶的中国风海报

以及一些节日海报的应用都能很好的体现中国节日的特色

第三招：简约风格

如果你没有太多时间去追求风格创作但是又想要有好的视觉效果，那你也可以学学喜茶的广告，走简约派的路线，简单来说这一风格的要素就是排版要好 + 元素要少。

说白了就是画面保持简洁的同时还要具有设计感，这就全靠排版来撑了，相比其他的风格，简约风的排版更多元化。

常规的排版方式有居中、左右、四边构图。

只要选择合适的构图外加上好看的照片，你就会获得不错的简约风海报了，其实这种风格也不用拘泥于灰白色调，配上其他的颜色或是插画图片时效果也一样很好。

当然，我们在看设计作品时都是只看到了最好的一面，看不到品牌与设计师在背后反复实验与摸索的过程。

△ 喜茶全年海报的一小小小部分…

里面还有一些不错的海报作品却因为不同的原因未能与大家见面。

号称茶饮界「广告公司」的喜茶在这一年除了用心做饮品之外，也为设计圈提供了不少有价值的物料，能够靠设计将产品的价值传递出来对于设计师来说是一个好现象，设计在以后的日子里会被越来越多的品牌重视起来，上面这些「套路」大家可以学起来了~

文章来源：优设

作者通过从会员体系构成的4个核心要素对“京东、亚朵、支付宝、腾讯理财通”的会员体系进行拆解，发现不同类产品中的设计会员体系需要注意的问题。

一款产品要想持续获取用户价值，前端增长和后端活跃、留存与转化缺一不可。随着流量越来越贵拉新成本越来越高，多数互联网公司开始将用户活跃与留存视为产品核心指标，而会员体系一直以来都是最有效的活跃留存与转化的运营手段之一。

本文对比4款目前付费类产品中比较典型的“京东、亚朵、支付宝、腾讯理财通”的等级会员体系，分别代表4种不同的等级会员体系类型。从会员体系构成的4个核心元素：命名、层数、成长值计算、会员权益，来快速了解一款产品的会员体系。

希望通过这篇文章给在做会员体系抓耳挠腮的你一点启发。

一、会员命名和层数

会员命名是品牌文化、用户群体特征的体现，而会员层数的多少则反映了产品转化路径的长短。

1. 四个产品的会员命名和层数概况

京东会员分为非付费会员（下称等级会员）和付费会员两个体系。为了凸显付费会员，2019.9.15日起，取消了等级会员原有的铜银金钻制会员体系，以京享值代替。

至此，从会员命名的角度，京东的会员只有付费会员和等级会员两种名称，等级会员会员之间以京享值的大小进行区分，共分为5层。

亚朵会员在命名方面充分体现了“舒心微笑”的品牌特征，等级会员共分为5级，分别为注册会员（初遇）、银会员（识君）、金会员（知己）、铂金会员（执手）、黑金会员（逍遥）。括号内的短称分别来对应着两句诗词，详见官网的会员介绍。

支付宝等级会员共分为4级，分别为大众会员、黄金会员、铂金会员、钻石会员。从级别数量来说，支付宝会员级别相比于前者少了1级，会员升级的难度也加大了。

腾讯理财通等级会员共分为4级，分别为普通会员、白银会员、黄金会员与铂金会员。颜色区分上，级别从低到高颜色分别为蓝灰色、银灰、金色、黑色，通过灰色调营造理财产品的严肃和专业感。

【注：等级会员是指，会员级别不能直接购买得到，而是要通过完成产品任务升级达到。付费会员是指，用户通过付费购买产品会员特权，购买的会员独立于非付费会员，不是非付费会员的某一级】

2. 会员命名和层数分析

通常会员命名会以金属作为主线，其中金、银、钻石等最为常见。

这是用户已经熟知的命名方式，遵循以上规则有助于用户更快的接受会员身份。但如果产品有特殊的品牌文化和目标用户，可以考虑在命名上加入品牌元素，如亚朵。

付费会员与等级会员之间具有重叠性。

高阶的等级会员分散了用户对付费会员的注意力，因此京东最终不得不对等级会员体系采取“除名”做法。

付费会员必然会导致原等级会员体系影响力的削弱，在初始设计时需要综合考虑付费会员和等级会员体系在维系用户、营销行为等方面的价值，做好取舍。

此外，还可以参考亚朵酒店的做法，将等级会员的某一级作为付费对象来售卖，如下图，亚朵酒店将会员体系中的第三级【金会员】单独售卖。

不同产品的会员层数不同。

电商等付费类产品会员普遍采用4-5级的分层、资讯类产品的会员体系可多达10级，如趣头条等；社交、游戏类产品更是根据玩法的不同，设置几十级的会员等级。

会员定级层数主要取决于产品的转化路径长短：

付费类产品转化路径短，用户使用产品就一定会付费，因此只需要根据用户实际消费能力进行用户分层，4-5层即可覆盖用户的全部消费能力。

但社交类产品转化路径长，需要用户长期活跃在产品内才有机会转化付费用户，会员级别需要足够多，才能保证用户有动力持续的活跃和留存。

此外，从成本的角度考虑，付费类产品的会员权益通常为商家的折扣和返利，会员级别越高企业付出成本越高，

级别过多会导致企业难以承担成本，而社交、游戏类产品的会员权益通常为虚拟的勋章、身份象征等，即使会员级别高达几十级，也不会产生过多的成本。

下图是趣头条10级会员的权益，可以看到权益大多数为荣誉勋章类虚拟奖励，企业几乎不需要付出成本。

二、成长值计算

成长值是用于衡量会员级别的刻度，用户通过获取成长值来达到升级、保级的目的。成长值的获取方式体现了产品主要的运营动作，而计算公式也根据业务变动速度和产品特点有所不同。

1. 京东会员的成长值计算涵盖的要素

• 计算周期：30天；
• 涵盖产品：京东商城和京东金融
• 行为：消费、活跃、信誉等方面，详见下图，已将需要消费的行为进行了特殊标记；
• 计算方式：黑盒，并未对外展示成长值计算的详细公式。

分析如下：

京东的主要运营动作包括以下几方面：提高用户消费，促进用户活跃、收集用户信息、建立信用评分体系等。

京东成长值的具体计算公式并未明确给出，因此可以推断其业务调整快，变动幅度大。不公布具体计算公式可以灵活的调整成长值计算公式，但也牺牲了用户的确定性体验。

2. 亚朵会员的成长值计算涵盖的要素

• 计算周期：最近12个月；
• 涵盖产品：亚朵；
• 预订渠道：亚朵APP、微信小程序、客服热线、企业号等渠道预定；
• 行为：消费、任务（完善信息、完成订单）；
• 计算方式：白盒，成长值包括支付金额、入住间夜、完成任务三个部分，计算公式明确。

分析如下：

亚朵对用户的主要运营方向为消费和互动，运营动作主要是围绕着订房和相关服务展开。

成长值计算兼容地区差异：酒店业务通常分布在多个城市，每个城市的消费水平差异很大。若仅仅以消费金额来衡量会员级别，会导致大多数的高级会员都集中在高消费城市，无法实现对二三线城市的用户激励。因此，酒店行业会员的成长值通常结合间夜和消费金额综合计算。

酒店预定更加依赖于用户渠道，包括OTA（美团/携程等平台）、自营渠道、分销商等。不同的渠道企业付出的成本不同，会员体系通常只给自营渠道的用户计算成长值。如亚朵。

3. 支付宝会员的成长值计算涵盖以下几个要素：

• 时间：最近12个月；
• 产品：支付宝；
• 行为：消费购物、生活缴费、金融理财；
• 计算方式：白盒，所有行为可获得的成长值均明确规定，详见下图梳理。

分析如下：

支付宝主要的运营动作包括促进用户消费购物、完成生活缴费和增加金融理财。生活缴费任务的成长值奖励较高，可以推测占据用户生活支付场景是主要运营方向

支付宝的成长值计算公式为白盒，这与理财类产品性质相关，由于涉及到用户的金钱投入，更需要获取用户的信任，明确的计算方式能够带给用户确定感。

4. 腾讯理财通会员的成长值计算涵盖以下几个要素：

• 时间：最近30天；
• 产品：理财通平台
• 行为：购买理财、会员任务（完善个人信息和达成理财目标）
• 计算方式：白盒，详见下图拆解。

分析如下：

腾讯理财通的主要运营动作包括促进用户购买理财、激励用户完善个人信息。腾讯理财通的会员任务多达27个，收集用户信息的任务占到1/3，可见完善用户画像为产品的主要战略。

理财通会员成长值的计算公式同样为白盒，清晰的展示用户完成任务能获得的成长值。

三、会员权益

• 从用户角度来说，会员权益是用户持续在产品内活跃和留存的动力，好的会员体系应当有突出的核心权益，且核心权益能够满足用户使用产品的核心诉求。
• 从企业角度来说，会员体系权益应当形成一个好的业务闭环，权益能够促进用户的再次消费，尽可能的挖掘用户的剩余价值。

1. 京东会员权益构成

• 从核心权益角度看：京东的会员以售后服务为核心特权，会员的级别越高，享受的售后服务越全面。这说明京东等级会员体系的目标用户更加注重售后服务，是用户长期留存的主要原因。
• 从业务闭环角度看：京东会员体系特权强化了其售后能力的优势，为用户的购买提供保障，提高用户满意度。结合京东的付费会员，共同形成业务闭环，促进用户的复购。

2. 亚朵会员权益构成

（注：数字标记表示用户级别，其中高级会员拥有低级会员的全部权益）

• 从核心权益角度看：亚朵的会员权益基本围绕住宿需求，其核心权益是消费优惠返利，涵盖1-5级全部会员。可见酒店类产品的用户的核心诉求还是在于更高的性价比。
• 从业务闭环角度看：亚朵酒店的会员权利累计20项，包括优惠返利、住宿体验、饮食、服务和身份彰显等，几乎覆盖了用户住宿的全部场景。以优惠返利为核心的会员权益和多种服务提升用户体验的业务闭环，可以有效的促进用户的二次下单行为。

3. 支付宝会员权益构成

• 从核心权益角度看：支付宝会员体系的权益覆盖用户的衣食住行多种场景，核心特权是在支付宝内的商家小程序可以享受会员特权。满足了用户在支付宝以会员身份完成衣食住行的需求。
• 从业务闭环角度看：支付宝会员权益形成了对商家小程序的引流，促进支付宝小程序的发展，进而实现用户在衣食住行各个场景下都在支付宝小程序内消费，实现了支付宝的支付业务闭环。

4. 腾讯理财通会员权益构成

腾讯理财通会员等级礼遇如下图所示：

• 从核心权益角度看：腾讯理财通会员权益基本围绕用户的理财行为，核心权益为资金流转特权。包括周转、还款、存取等。用户在产品内的核心需求是更加顺畅的完成资金流转。
• 从业务闭环角度看：腾讯理财通会员权益为用户提供了流畅的资金流转权益，用户就可以更加放心的在产品内投资理财。同时理财通的等级礼遇主要围绕白金以上会员提供高端服务类权益，与会员权益形成业务闭环，促进用户的活跃和留存。

结语

通过分析会员体系的4个核心元素：命名、层数、成长值计算、会员权益，可以迅速读懂一个产品的会员体系。

一个好的会员体系能够通过选择合适的会员命名、设置符合产品转化路径的会员层数、设计涵盖主要运营动作并能灵活调整的成长值计算体系、提供满足用户核心需求的会员权益。最终形成业务闭环，引导用户价值逐步提升，实现用户价值的最大化。

文章来源：人人都是产品经理

本文分享国际化司机端首页改版完整思考过程，化繁为简提升司机使用效率，提升产品用户体验。

关于国际化司机端

随着滴滴国际化业务脚步不断加快，司机端始终是作为承载全球化业务运力的基础保障。

同时，在移动通信技术高速发展的背景下，不同国家间的传输速度与硬件设备差距正在不断缩小，用户对应用产品的期望由基础的可接受、可使用、功能齐全，向更易用、简约、更为专注的产品使用体验上转变。

在新阶段下，「为全球司机用户提供一个「克制」「可依赖」的产品使用体验」、「为业务拓展提供有力的体验支撑」是体验设计团队在新的阶段下提出的目标。

现状分析

2018 年 9 月我们与产品同学深入拉美当地对司机侧进行为期 2 周的产品体验调研。虽然在当地的时间较为短暂，但是我们依旧感受到了拉美国家的习俗文化和人文特点。

相比中国人的含蓄内敛，巴西与墨西哥人显然更加热情随和。

在巴西，这个世界上假期最多的国家，处处体现着人们对生活的享受才是自始至终的追求。无论是世界杯一个月狂欢长假，还是周末下午两点开门的商区，总会让人羡慕的同时刷新你对享受生活的认知。

而娱乐至上的墨西哥人，热情友好，能歌善舞，我们常说的放飞自我在这里几乎成为墨西哥人每天的生活常态。他们喜欢享受当下，后天下之忧而忧。他们觉得工作赚钱就是为了更好的休息，大多数人每天都是开朗乐观的处世态度。

同样，落后的基础建设、糟糕的交通状况、教育水平低下、价格昂贵的电子产品以及相对不太稳定的社会环境，也是它们共同存在的问题。

在当地，我们通过实地调研与用户访谈等方式，针对产品体验的问题与司机进行面对面沟通。收集了很多宝贵的用研资料与司机诉求，如司机希望平台为他们推荐订单引导，司机希望获得更多的实时动态讯息和司机每天都可以查看自己的收入状况等，集中体现在效率、感知、体验这三大方面。

其次，伴随着业务的不断增长，越来越多的功能使得我们的产品变的更加复杂，旧版的框架布局早已是不堪重负，无论是现存的体验优化问题，还是未来业务功能的拓展问题，旧的框架体系都是难以为继，无法再通过简单的修补来满足用户和业务未来的诉求。

明确改版及对应目标

改版升级对产品本身来说是一件非常重要的事情，需要对多方因素进行慎重考虑。经过多次的沟通讨论，权衡改版对产品可能产生的利弊关系，采用小步快跑，快速试错，分阶段分模块的方式进行。

首页既作为承载核心功能（发车）的载体又是其他重要板块的分发的入口，在内容呈现与用户感知上都存在很大的体验提升空间；我们通过拆解业务中长远需求规划得知，大多数重点需求依赖于首页框架布局，而现存首页框架无法满足业务诉求；在竞品的改版中首页的变化最大，并在司机群体中取得比较正向的反馈；通过上述分析，决定率先对首页进行优化改造。

首先我们与产品、运营侧进行深入讨论，结合用户访谈整理的用户诉求，对此次首页改版的目标达成一致。

聚焦核心诉求 提升首页体验

1. 首页框架具备较强的业务拓展与灵活配置特性

在旧版的框架体系中，大量信息在首页呈现，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了司机的关注点。随着业务模式不断扩展，首页新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的首页框架尤为重要。

首先我们将旧版的首页布局打破重建，对现有模块进行整理。功能相似、定义模糊、司机操作相对低频的模块进行合并、删减。

对司机高频操作模板进行场景划分，将相关信息进行聚合处理，通过对入口的强化，来明确司机对不同模块的认知。

出车管理

将与出车相关信息进行组织聚合，结合司机不同的使用场景，将功能与模块进行结合，加强认知，减少司机多余的思考与判断，快速响应，提升工作效率，同样也为业务在有关出车功能方面提供灵活可拓展的组件框架。

收入管理

通过显示司机最关注的今日收入信息，为司机提供方便快捷的查看功能，使司机更专注于工作本身。同时对收入管理入口起到了强化认知作用。

信息管理

对关于个人相关的信息通知及功能操作进行聚合，方便司机对个人信息进行快速查看，提高查看效率。

通过对框架模块的标准化定义，后续的业务需求便可以进行归类管理，根据不同需求的不同属性，结合功能使用场景，选择合适的模块进行展示，提高司机使用效率同时增加首页的业务框架扩展能力。

2. 精简信息呈现 明确核心操作

通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题，同时地图的面积相比旧版首页也大幅增加，信息呈现更加简洁、轻量。

出车操作作为首页的核心功能，通过调研得知，司机普遍反映在旧版首页中存在出车操作感知弱、收出车状态区分不明显的问题，对司机的操作体验和感知体验造成了比较大困惑。

在首页改版过程中我们着重对出车操作进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：

• 强化发车按钮。突出核心功能，鼓励司机更多更主动的发车。
• 强化接单中的状态。增强司机对接单状态的感知度，减少司机对于所处状态的困惑。
• 弱化收车按钮。对司机收车按钮进行收纳，减少司机的误操作的行为。

通过「两强一弱」，减少司机困惑提升发单效率的同时，间接的延长司机的在线时长。

完成页面设计后我们发现，操作按钮通过静态视觉角度去表达收出车空间位置关系是十分困难的，仅通过 Toast 提示会造成用户理解的断层，于是提出使用动效去进行「搭线」串联，搭线发车前按钮的点击和收纳后的位置提醒进行视觉体验上的串联，从而达成感知增强，解决视觉体验层面不容易解决的问题。

3. 增强奖励信息首页曝光度及展示样式 缩短查看奖励路径

丰富的订单奖励活动是我们与竞品相比重要的竞争优势，司机在完成定量订单的同时提供了更多的额外收入。查看每日奖励活动，已成大多数司机每日上线必做的事情。

与旧版相比，在新版首页中通过提升奖励入口层级，缩短了查看奖励活动操作路径，从而方便司机快速查看。

通过首页透传的奖励卡片，司机在首页即可获取到推送的奖励相关信息，及时获取到奖励预告和进度，提升了司机工作效率的同时加强了司机对奖励活动的感知。

4. 设计语言升级

在经历了快速奔跑的粗放阶段，我们也在思考司机端产品究竟以怎样的品牌气质传递给海外的司机群体。

在当地，我们在司机心目中更像是合作伙伴，凭借真诚互利的态度赢得了当地司机的用户。

真诚、热情与融合我想这就是我们想要传达的核心品牌情感，而克制、可依赖将作为产品体验的设计原则贯穿始终。

颜色系统

司机端颜色系统在基于现有品牌色基础上，结合不同国家颜色文化的理解，新增加符合本地化的辅助色系，以提升产品的亲和力，传递品牌情感。

文字系统

针对司机用户的操作使用场景，对文字字号梯度进行提升，通过文字粗细、颜色、大小加强信息对比度，使司机在更多复杂场景下可快速获取重要信息，提升阅读体验。

在此次改版中新引入 Barlow 与 DIN Alternate 字族作为模式数字展示字体，两款字体分别为 Android 及 iOS 系统下默认包含字体，相比 Roboto 与 SF Pro text 两款字族，在数字展示上更为明确、识别性更强，同时因为自身「纤瘦」的特性，在屏幕横向面积上节省更多空间。

结语

业务在不同的阶段有不同的侧重方向及打法，设计侧根据业务所处阶段应及时的调整自身的目标定位，快速响应，积极探索设计的机会和突破点，在不同的阶段发挥自身价值，助力业务达成共同目标，为用户创造更便捷的产品使用体验。

首页改版从立项到设计再到研发，多部门同学紧密配合，在有限的时间内最大化的完成预期上线效果。

全量上线后，通过问卷对首页改版进行满意度收集，司机对新版首页的满意度平均值高达 93%。取得的成绩离不开每一位参与改版的同学支持，也得益于国际化团队自始至终对产品体验的重视与认同。

作为司机端体验升级的第一步，首页改版只是一个开始，希望通过不断的打磨优化，秉持初心，为全球司机提供更克制、可依赖的出行平台。

文章来源：优设

一、建立一个库



1、git clone [url]    // 克隆代码



2、设置贡献者



      git config --global user.name ""   // 设置当前本地库username



      git config --global user.email ""   // 设置当前本地库useremail



      git config --global user.email   // 查看当前本地库useremail



      git config --list   // 查看所以配置项

二、git的三个区

1、工作区：本地编写代码的地方叫工作区

2、暂存区：工作区改好的代码先提交到暂存区，然后由暂存区将代码提交到版本库

     - 作为过渡层

     - 避免误操作

     - 保护工作区和版本区

     - 分支处理

TypeScript是什么

Type+EcmaScript6

TypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的JavaScript代码。由于最终

在浏览器中运行的仍然是JavaScript, 所以TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript是JavaScript的超集，这意味着他支持所有的JavaScript语法。并在此之上对JavaScript添加了- -些扩

展，如class / interface / module等。这样会大大提升代码的可阅读性。

和JavaScript若类型不同，TypeScript这种强类型语言最大的优势在于静态类型检查,可以在代码开发阶段就预知一

些低级错误的发生。

●-种类似于JavaScript的语言，在JavaScript的基础之上增加了类型，同时增强了JavaScript部分语法功能

●遵循EcmaScript 6标准规范

●由微软开发

●Angular2框架采用TypeScript编写

●背后有微软和谷歌两大公司支持

●TypeScript可以编译成Javascript从而在支持Javascript的环境中运行

●TypeScript和javascript的关心就好比less和css的关系



javascript 是动态的

可以在执行阶段重新赋值不同的类型数据

.ts 后缀表示一个TypeScript文件

Typescript兼容es6

TypeScript为javascript增加了类型的概念

Typescript是强类型 一旦定义数据的类型 不能动态修改这 样帮我们在开发阶段避免很多低级错误

1.全局绑定滚轮事件，获得dataZoom的位置：



myChart.on('dataZoom',function(event){

    if(event.batch){

    start=event.batch[0].start;

    end=event.batch[0].end;

    }else{

    start=event.start;

    end=event.end;

    };

});

2.把的start和end赋值给要更新的option



window.setInterval(function () {

    num=Math.random()*num+100;

data0.splice(0,1);

data0.push(num);

 

option.dataZoom[0].start=start;

option.dataZoom[0].end=end;

myChart.setOption(option);    

},3000);