如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在做UI设计之初，我就有跟踪一些app版本和更新的习惯。在互联网行业工作久了，我总是会从他们每一个版本的产品形态去揣测这个公司的动态。看到一些功能和交互点，我会设身处地地思考如果我是他们的产品设计师应该如何处理；遇见一些深得我心的功能点，我也总是有一种和他们的产品设计师惺惺相惜的江湖感情。反正久而久之，我边猜测边总结，也是养成了自己的一套“歪门邪道”的方法论。

言归正传，我们来看这一篇文章的内容。

时间来到了2017年，手机空间越来越大，大家的手机中也装了越来越多的app。很多时候，当拿起一个朋友的手机，看他手机里都有哪些应用，这些应用的优先级是如何排布的，我经常会从中得出关于这个人的另一层线索。

比如一个人手机里优先位置上有脉脉、知乎、豆瓣、一个ONE、单读这几个app，那我可以推测这个人一定是具备文艺属性的互联网从业者。

比如一个人手机封面是吴亦凡或者鹿晗，手机里优先位置上有优酷、爱奇艺、腾讯视频、芒果TV、天猫、京东、蘑菇街这样的一堆app，就可以看出这是一位爱综艺、爱追星、爱剁手的小姑娘。

……

 1. 意识是主观形式与客观内容的内在统一

如果说2013~2015年app的 UI设计上充斥了很多同质化产品的话，到了2017年，UI设计师们在dribbble和behance的风格影响下，产品的设计有了更多的发展空间。我们不得不说的是，现在的app比之前越来越好看和越来越好用了。

如下图所示我随意截取了九个我自己觉得UI很棒的产品和大家分享，他们分别是Enjoy、单读、Artand、Airbnb、一个ONE、Gilt、良仓、Zeen、和氧气。

那这里有一个关键的问题就出现了，为什么有些app，普通用户一打开就自然而然地觉得它很美？用户这种“觉得它很美”的意识到底是从哪儿来的？

在此之前，我先来说两组哲学概念。

意识是主观形式与客观内容的内在统一。（马克思主义哲学）

内容决定形式，形式反作用于内容。（黑格尔唯心主义哲学）

为了阐述用户这种“觉得它很美”的意识到底是从哪儿来的，就必须要了解app中“内容”和“形式”之间的关系。那我们不妨来看一下什么叫内容，什么叫形式。

2.内容

如果斗胆给app设计工作中的“内容”下一个定义的话，我大概会说：内容是集成在app中，所有可被感知的图片、文字、声音的合集。这里之所以说是可被感知的，主要是从用户层面上看，忽略了用户不可感知的“代码”层面。

那么我们有必要搞清楚的是，一个app的内容到底是如何产生的？也就是一个app到底是如何产生的？

那这里我不妨展开一下，假设我是一个产品设计师，有一天CEO告诉我最近想做一个电商app。（这里我假设我们公司很有实力，忽略了市场和运营、渠道和资金上的问题，只考虑产品设计方面。）

那这个时候我会问老板：“老板，你做电商类app，是想做平台类的呢还是做垂直的呢？你可想好了啊，你做平台类的想要从淘宝、京东分份额的话，那你必须要有自己的特色。比如国内app‘xx’、‘xx’和‘xx’、他们都有自己的特色。或者说你是想做垂直一些的么？比如‘xx’是专门做化妆品领域的，比如‘xx’是专门做美食的。”然后老板被我一番“驯化”之后得出的结论是我们来做一个美食电商，但是这个美食电商不会对标Enjoy那样的高档人群，而是做成类似于“什么值得吃”这样的大众场景。

好，故事讲完了，现在我化身为这个产品设计师，简短片面地阐述我的思考过程：首先我拿到的目标是做一款“什么值得吃”app，它的目标人群是全中国吃货，且要满足吃货推荐、评价和在线下单支付（前期无法做渠道的话需要跳转淘宝京东链接）等功能。

经过一番思考，我认为这款app的MVP状态应该需要如下图所示的功能。

这里简单说一下MVP是啥意思。“MVP=Minimum Viable product（最小可行产品）”是《精益创业》的作者埃里克·莱斯提出提出的一个概念，字面意思就是可保证产品正常使用（主逻辑闭环）的最小产品单元。MVP又分为Validating MVP和Invalidating MVP，在这里就不展开了。《精益创业》是一本特别赞的书，推荐大家阅读。

我设计的这个其实是Invalidating MVP，大概需要四个部分。

“推荐”是核心，以帖子形式或者别的什么形式推荐一些东西并附上链接。“专题”方面做一些可供运营和推广的专题，比如“情人节送什么巧克力”、“最适合食辣族的几款辣酱”之类。“商城”里面会放一些自营的物品。“我的”里面会有我的推荐、我的收藏、我的订单之类的一堆东西。

你们发现了吗，其实这个时候，产品设计师就已经在定义产品的信息架构了。

第一，因为这个app叫”什么值得吃”，那我们是不是还需要推荐一些线下值得吃的店呢？如果做了是不是就和Enjoy同质化太严重了？那最好就是先不做。

第二，在推荐这一页里面我大概需要什么功能，因为面向的对象不太像Enjoy那种偏一线城市的人群，那我应该用户群体同类对标到今日头条这种level的感觉。

第三，这个首页我是按照各种食品属性的分类来建立推荐列表呢，还是说我按照人的属性来建立推荐列表呢？如果是按照食物的分类的话，给别人的感觉可能和淘宝很像，比如我在列表里面看到“巧克力”再点进去看巧克力的推荐，和我在“甜品族”这个人群标签里看到某巧克力好吃，这两种行为逻辑给用户的感觉完全不同。大家体会一下，作为“什么值得吃”这款app来说，肯定是后者更适合，所以得出结论是以人的属性建立推荐列表。（我甚至考虑到了以后迭代未来功能版本的可能性，比如到时候每个人可以有多种身份标签，再去做匹配社交之类的。）

好，那我现在关于产品首页大概得出了以下几点感觉。

（1）首页推荐按照人的属性标签去区分推荐列表。

（2）产品风格不宜太洋气（尤其是一定不能像Enjoy那样使用黑白配色），最好是产品对标今日头条和微博的感觉，受众偏向二三四线城市。

（3）每一个推荐应该有收藏、购买链接等部件，在首页上应该有专门为运营活动或者市场换量设置的入口（可能是banner形式）。

（4）为了不使推荐属性具有倾向性，每一个推荐都应该尽量层级平行。（比如“吃辣党”和“甜品族”就应该入口平行。）

（5）一定要保证一个完整且通顺的支付逻辑和用户推荐逻辑，这是最基本的两个功能。中间可能涉及到推荐里面要有商城链接（如果商城没有的要跳转淘宝），自己的商城要支持支付宝、微信等支付方式，要有订单状态和退单等一系列功能，余额功能或退款自动退回功能二选一（看公司需不需要资金池）。

....（此处省略N条）

其实，app“内容”的产生，就是我上述这些奇怪东西的综合（当然其实并没有上述这么简单，这个以后有机会细讲），比如我们从上面的论述当中，可以归纳出这款“什么值得吃”app的首页“推荐”应该具有如下信息。

我写这么多字其实就是想告诉大家一个app的“内容”是如何产生的，当然我这里说得十分简单，真实情况可能比这个复杂百倍，大家意会就是了。

好了说完了内容，我们来看所谓app中的“形式”又是什么。

3.形式

如果说我们把所有集成在app中可感知的图片、文字、声音的集合称作app的内容的话，那么app的形式就是“承载这些内容，使内容更好被感知的方式”。

人有五感，包括视觉、听觉、嗅觉、味觉和触觉。而人去和一款手机应用进行交互的时候只会从视觉、听觉、触觉（反馈）三个方面去感知，而触觉涉及到交互层面，以后我写到app的交互架构的时候会详细说。 听觉其实也不是本文重点，我举个例子一笔带过就好了。比如大家都用过滴滴，滴滴有一个“内容（功能）”是司机送一个乘客的过程中，当判断距离目的地很近的时候会默认进行一个“下一单的匹配”的功能。我们用滴滴的这个功能来对比手机游戏里面的“匹配下一局”，我们会发现这是几乎相同的“内容”，但是承载形式不一样。手游是视觉展现，你必须点击手机上的“匹配”按钮，而滴滴因为考虑到司机在开车很难解放双手去点击匹配，所以从产品逻辑上设计的是“语音提示+主动匹配+手动接单”的方式，所以我们总能在快下出租车的时候听到司机手机上传出响亮的“开始接单啦”语音提示。

本文的重点是视觉。

可能在大家以往的工作当中并不会关注一款app原型是怎么样设计出来的，大家可能只会关心我拿到原型以后应该如何转化为惊艳的高保真页面。

把一个内容整理、排列成一个app页面，就是大家更关心的“形式”的部分。还是回到上文“什么值得吃”这款虚构的app上，综合上面的观点，我大致能画出原型如下图所示两种。

当然这个是最粗糙的原型。（如果各位UI设计师在工作中接到了类似于这样的原型那只能说心疼你们一秒。）那么问题来了，大家在生活中一定见到过这两种原型的app。左边这个很常见，比如斗鱼tv这些直播平台，早期闲鱼、网易严选和今日头条等都是用的这种感觉；右边这个就更常见了，不论是点餐平台（美团、百度、饿了吗），还是大型电商（京东、淘宝）你都可以看到它。

那么问题来了，尝试分析一下，上面这两种形式到底有什么优劣呢？

第一件事应该想到的是如果需要采用右边的排列形式就必须要控制标签（tag）的字数，你懂我是什么意思吧？比如今天有个运营跳出来说我们做一个新的标签把名字叫“酸酸甜甜就是我”。产品一定特别崩溃，原因如下图所示。

第二，由于右边的标签占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的，右边的优势在于，由于竖向排列可以让一个屏幕显示更多的标签，这一点就需要取舍，比如一个产品的初期没准备放这么多切换标签的话，还是建议用左边那种。

更深层次的，外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧标签一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。但是比如早期的今日头条只能采用左边的这种形式，因为头条是需要用户长时间沉浸的，比如用户选中一个“体育”的标签一般要看好久好久，用户需要沉浸在这个标签下的内容中，那这个时候显然用右边这种设计方式让标签常驻屏幕左侧是不合适的。

基于以上分析，作为内容+电商平台的“什么值得吃”应该选用左边这种设计形式。

好，“什么值得吃”这个虚拟的例子就说到这里，主要是让大家明白内容和形式之间的关系，只有你们明白了这个，才可以正式进入本章的主题——app的视觉美成因分析。

4.app的视觉美成因分析

首先来看结论。一款app让你感觉到长得美，一定是团队在两个方面下功夫了——第一是内容的视觉优化，第二是形式的视觉优化。

我先来给你们看两张图，让你们感受一下什么叫内容的视觉优化。

你们可以看到左右两张图，左边是Enjoy的精选页，右边是我随手糟蹋的，大家会发现其实信息内容一模一样，但是左边的和右边的视觉设计差距大家一眼就能看出来吧。如果出现右边这样的UI稿，那只能说明这个团队在内容的视觉优化上面不用心！以上就是内容的视觉优化的作用。关于内容当中的图片，其实大家都有直观感受：一款app允许用户自定义的图片越多，这款app视觉就一定越难把控。原因很简单，因为用户自定义的信息里面，文字信息我们是可以通过限制字段和select（选择）去控制的，但是对于图片来说，哪怕控制了用户自定义图片的尺寸，我们也无法控制这些图片的质量。大家去看一下秒拍这款app，它的框架设计做得很棒，包括一些empty status（无内容状态页）的小图标绘制都很棒，但是我们打开app的时候，首页的内容总是参差不齐，差强人意。同理还有闲鱼这款app， UI框架做得很漂亮，但是内容页面总会显得没那么“高大上”。

Enjoy，自如、氧气、想去以及Gilt、美团等这些轻量电商或者租房app都选择花一大笔成本自己聘请一批或全职或兼职的摄影师的原因，就是为了得到符合自己规范的优质内容图片（比如你们去看自如的房源信息照片基本就是那种样子，氧气的内衣样片背景永远是白色）。

我之前做过一款旅行游学类app，在立项之初我们的图库里面就已经有了几万张高质量有版权的摄影师作品，然后在设计的过程中大胆采用流式布局（类似于今天开眼app），大量展示优质图片，才使得在2015年初那个时期我们的UI风格比较具有鲜明的特色。

其实这也是一个产品团队需要深思熟虑的点：

·比如旅行app，一定要有大量优质的图片作为依托才可能美。

·比如淘宝这种体量的大型电商，那除了尽可能控制图片质量以外，更多的应该在优化专题和banner上，并且告诉入驻商家（用户）上传优质的图片更容易获取用户流量从而转化为成订单。

·比如知乎、贴吧之类这样的问答和社区，用户上传的图片五花八门千奇百怪，那我们可以考虑在首页列表展示的时候就压根不要展示图片……

那是不是内容的视觉优化只包含图片的优化呢？其实不是的，除了图片的视觉优化以外，icon的优化、文字的视觉优化这些都是很重要的。

关于icon的优化大家应该已经看过足够多的文章在这里我就不赘述了，比如线性icon里面不能掺入块状icon，负空间icon里面不应突然出现一个奇怪的渐变icon。我有一点心得可以分享，比如大家画了一个2px的线性图标用于@2x，那在plus iPhone 的plus机型，6p 7p 8p都叫plus上面应该要手动调整一下图标变成3px而不是用png自动生成，否则会有虚边（除非你们的工程师使用的是svg的iconfont）。

关于文字的视觉优化，几乎市面上的所有app，只要涉及文字内容的排版，毫无例外都做得很好了。从根源上出发，为什么一个设计师需要去不厌其烦像个工匠一样折磨开发调整字体大小间距粗细什么乱七八糟的东西？其实，字体视觉优化去达到的目的主要有两点：

（1）辅助视觉对焦

（2）减轻视觉压力

第二点没什么好说的了，大家应该都明白，主要说第一点，视觉对焦这个事情是这样的，我们在一个界面中，如果不出现特别突兀的信息，正常人眼一般是从左到右，从上到下的顺序阅读。

比如上图是一个阅读界面，所有问题都没有特别突兀的地方。我们把界面做一个高斯模糊去分析视觉焦点，会发现整个页面呈现很平和，所以，这个页面的阅读顺序应该是一行一行地阅读文字，也就是从上到下，从左到右。

但是，这只是页面形式很平的情况，举个没那么平的例子。

上图是知乎的一个页面，我们把它去色并且高斯模糊去分析它的视觉焦点。大家会发现其实视觉焦点是加粗加大的标题字体和上面的小头像构成的。

这就是使用文字优化去辅助视觉对焦。我不妨再举一例，大家来看下面的2016年5月左右的氧气app截图。

左边是氧气的原UI，右边是我做的对比图。显然，关于文字优化辅助视觉对焦这一点，氧气的设计师深谙此道。他们没有按照右边那种传统办法设计这个页面，而是把每一个深夜话题的题目都变成了一张图，变成一张图还不算，还在这张图上面用浅绿色“划了重点”。这样虽然加大了设计师的工作量，但是这个页面正是因为这样的处理，能让用户第一眼聚焦到标题上。

关于内容的视觉优化，我来总结一下吧。

app内容是集成在app中，所有可被感知图片、文字、声音合集。那么内容的视觉优化主旨在于通过图片，文字，图形（icon）等的优化，去使得app更加易读、易用和美观。

说完了内容的视觉优化，我们再看一下形式的视觉优化案例。按说只要内容都已经优化好了，表现内容的形式不是排得特别烂，视觉效果展现出来应该都不错。我们再重复一遍app形式的定义——能更好地承载内容，使内容更好地被感知的方式。

我们该如何去排列不同的内容让它们更好地被感知呢？

这里面最常见的方法就是UI组件化设计，关于UI组件化设计我个人的定义是一款app里面同样形式排列但是不同内容的单元。这样的例子不胜枚举，我们每天都见到的最常见的一个组件化设计是微信里的每一个table view （表格视图）。

大家打开你们的微信，可以看到其实微信的聊天列表的每一个单元都是由固定的内容组成的。内容包含一张图（头像），两段文字（名字和信息），一段时间组成。

再看以下两个页面。

先看左面这个页面，虽然第二个品牌故事被遮挡了很多，但是由于我们看到了第一个GUCCI的banner之后，用户心理预期就有了，用户左滑一下屏幕大概率出现的也是这样形式的不同内容。

再看右边这张图，一个app的每一个专题都是以一本杂志的形式呈现的，所以当你看到这个页面的时候，用户心里会有“我左滑右滑都是一本专题书”的预期。

在设计过程中，我们往往会把相同属性的内容设计成同一形式。这样做有什么优点呢？最大的优点是减少用户认知负担，使得内容更好地被感知。

举个大家都懂的格式塔的例子。

看上图A，大家都知道接下来一个一定是正方形，但看上图B，下一个别说你们不知道是什么，我也不知道。格式塔相似律告诉我们，人们在知觉时，对刺激要素相似的项目，只要不被接近因素干扰，会倾向于把它们联合在一起。

那么我们就很容易解释下图。

大家看到这里是不是很熟悉？联系上下文，现在应该知道为什么市面上的app都这么设计了吧？还不就是为了让用户更好地接受信息。

5.总结

一切UI设计本质上是为了更好地展现信息。

更好地展现信息是为了更好地指引用户完成交互操作，从而让用户更好地去接收信息并完成一定功能目的。

本章一直在讲述app信息呈现上的视觉优化。其实视觉优化也好，逻辑优化、交互优化也罢，都是为了使得app更加好用、易用、有效。

在我刚开始接触UI设计的时候，也曾经沉迷dribbble，不断模仿那些大师们的惊艳界面。在长达一两年的学习和工作中，我一直认为UI设计师的本职工作就是画一个漂亮的壳子，把信息装进去然后能让app变得更好看而已。

但是后来我完全不这样想，如果现在让我评价一款app的UI，我可能真正最看重的那个维度已经不是“视觉感觉”上的好看，而是“视觉逻辑”上的严谨和“视觉风格”上的一体化，比如分割线，比如icon的样式，比如tableview（表格视图）的设计，比如字体的主次对比等。

当我没有理由的画一条分割线，只为了分割两个也不知道是啥的元素时，当我没有理由地就是想要为卡片化组件加上一个box-shadow（阴影）时，当我没有理由的设计一个奇怪的交互方式还硬说它特别好用时，我都在警醒自己一句话：每一个UI界面的设计都应该被赋予应有的理由。希望以此共勉。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

整理了一份UI设计师怎么整理自己的作品集，希望能给正在准备作品集的你一点小小的帮助，大家互相进步^_^

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

mongoose保存数据：

const save = new Model(data).save()
    


        

            1
        

    

const save = new Model(data).save((err, result)=>{ if(err){ // 保存失败执行的操作
    }else { // 保存成功执行的操作
    }

})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

try{
    const save = await new Model(data).save();
    // 保存成功执行的操作 return ... }catch(err){
    // 保存失败执行的操作 return ... }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

const mongoose  = require("mongoose"); const port      = process.env.PORT || "8899"; const UserSchema = mongoose.Schema({
    userName: {
        type: String,
        unique: true },
    passWord: String,
    createTime: {
        type: Date, default: Date.now()
    },
    updateTime: {
        type: Date, default: Date.now()
    }
}, {
    timestamps: {
        createAt: "createTime",
        updateTime: "updateTime" }
});

module.exports = mongoose.model("USER", UserSchema);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

    

const User = require("./user.model);
class User{
    async login(user){
            try{
                const result = await new User(user).save();
                // 其他操作，如发送注册邮件
                return { success: true }
            }catch(err){
                return { success: false, message: "用户名或密码错误" }
            }
   }
}
moduel.exports = new User();
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

const server = require("./server); async login(){ // 首先获取请求中携带的用户信息 const result = await server.login(user);
    if(result.success){ // 注册成功执行的操作 }else { // 注册失败执行的操作 }
}

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

列表时间排序到底应该正序还是倒序？哪种体验会更好？各大知名产品都是如何做的？

背景

前阵子正好做到了一个类似“申请通知“的功能，因为涉及到列表，所以要考虑列表的排序规则，那么问题来了，要用哪种排序规则（拼音、时间…）？

当然，这里肯定会用时间排序，那么按照时间的正序（新的通知在下面）还是倒序（新的通知在上面）？以下将进行一个系统的分析，列表时间排序到底要正序还是倒序？

产品分析

我们可以先看下市场上的产品都是怎么做的，在这里我将这些产品分成了两类（可能不全，这里不谈评论页面哈）：

1. 消息通知页面

一般由产品推给用户，可能是产品运营通知，也可能是其他用户发生了一些操作等。

看了很多产品的例子，这里就不全部列出了，几乎大部分的通知列表都是按照时间倒序，只有网易马上办和拼多多是正序。

2.内容信息流页面

内容更新相对比较频繁：

几乎所有新闻资讯类都是这种类型的列表，采用的都是时间倒序。

微信和钉钉逻辑分析

1.微信

提及微信大家对微信新版本的一大改动肯定非常熟悉了，那就是订阅号的变化，微信把用户关注的所有订阅号的新消息拿出来放到一个页面——订阅号消息，它的排序是倒序，而其他具体的订阅号内部历史消息是正序，另外新的好友申请消息页面是倒序。

那么微信的这些模块为什么排序规则不一样呢？背后的原因是什么呢？我个人认为有几点原因：

1. 首先新的订阅号类似新闻资讯一样（可能微信就是想把它打造成这样，这点我们不展开），所以按照倒序排列也讲得通；
2. 具体订阅号中按照正序排列是因为页面下面有操作，可以进行文字的输入，所以这个页面很像聊天页面，按照正序也有道理；
3. 腾讯新闻这个功能模块的排序有点不太理解，明明是新闻类，排序是按照正序，和订阅号很像，这里我也分析了两点原因：

1）毕竟微信主体功能是IM，那么其他的模块都是附属，不是主要功能，可能腾讯新闻的根本目的就是为了给腾讯新闻APP导流。

2）将其他的模块做成订阅号模式在产品层面一致性和复用性很高，既保证了体验一致性，又减少了开发成本。

综上所述，微信内部列表排序规则是根据具体场景和功能决定的，其实都可以讲得通，不过单纯就某些模块的体验来讲却是有些勉强。感兴趣的话，大家可以看看支付宝，它的内部所有的列表高度一致，都是按照倒序，包括它的生活号（和微信的订阅号很像），这里就不讲了。

2.钉钉

钉钉作为一款企业级IM产品，大家也许并不陌生，它的功能可谓相当复杂，涵盖了很多模块，已然做成了一个大的平台生态系统，那么是不是因为功能的复杂导致了内部一些列表的排序规则各不相同呢？

说实话我是有些懵的，比如其他大部分产品的通知都是倒序排列，而钉钉就是正序，那如果说钉钉有自己的产品规则和逻辑的话，为啥有些类似通知的页面排序又是倒序？

这个实在讲不通，而且场景和功能层面这些列表其实还是比较相近的，那唯一能解释的可能就是互联网界经常说的——“这些模块不是一个团队做的”。

思考

综上，大家可以看到，基本大部分产品都是采用时间倒序，也就是的内容在上面，也有小部分采用正序，那么为什么会按照这样的逻辑呢？我进行了几点分析猜测：

1. 用户视觉流习惯从上到下，产品希望用户能及时关注新的内容，所以按照正序
2. 列表可能有一些操作，如下拉刷新、筛选，的内容靠近操作会更自然
3. 列表中若有回复的功能（微信公众号），更类似IM聊天页面，所以正序新的内容在下，比较合理
4. 产品内部体验一致性，大部分产品内部只采用了一种排序规则（除钉钉和微信新公众号），这让用户在使用同一款产品时，体验是一致的，有预期的。
5. 技术实现，技术实现的框架可能产品内部采用了同一套方案，所以如果是正序都是正序，是倒序都是倒序。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

想做好一个好的UI设计师除了应该具有一定的审美能力，还要了解整个产品的开发过程，因为目前国内的软件行业还不能对UI设计形成应有的重视度，所以对我们的要求就更高了，你要能作出夺人眼球的东西，还要站在用户的角度充分了解他们的需求和使用习惯，因为一般的软件公司的UI设计师只有一个或者几个也都是孤军奋战，而且经常会碰见没有经验的TEAM LEADER,不懂得协调你和其他团队成员的工作，所以你还要与团队成员充分沟通，来获得设计中所需要的基本信息，要有耐心有好脾气，做界面设计的工具一般有PS、AI、FH、CD、c4d、（至少一个），Dearweaver、FLASH HEML；编程方面最好能跟程序员同步，懂一点ASP JSP等软件开发语言、还有开发坏境、服务器种类；还要耐得住寂寞，在漫长的项目开发过程中，你的工作可能只是前期，到了后面可能会有很多的空间时间，用来学习充电是不错的选择。

嗯，首先呢，这是我从零基础到现在老司机写的一篇小经验文章，也是我首次发表文章，废话不多说，进入主题。

目前有太多太多的同学被UI这个行业给吸引了过来，都纷纷进军UI了。但是选择了进军UI，当然就要开始学习了，我相信有很多同学挺迷茫的，迷茫是在于选择培训班去培训呢，还是自己在家自学。在这里我个人建议，如果经济不差的话，你可以去选择一家较好的培训机构学习，这样也比较有可信度些，如果你实在是几千块钱都没有，分期几百块钱一个月都有压力的话，那么我建议你还是自学好了。（老司机：为自己学习千万不要想着省几块钱）

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、设计中的重复是什么？

在平面设计中，重复构成是常用的一种构成方法，通过重复可以使画面达到和谐、统一的视觉效果，并能加强给人的印象，也可以达到一种有规律的节奏感和形式美感。

排版的四大原则：对比、对齐、亲密性、重复，重复在排版中也占据了一席之地，可见它在设计中分量是不可小觑的。

格式塔原理：接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动，格式塔原理中的对称性就是重复的一种表现方式；格式塔原理中的相似性算是重复中自带的一种突变。

1. 重复

重复是设计中最基本的形式。在同一设计中，相同的形象出现过两次或两次以上就形成了重复。

在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值；在交互层面重复的元素有位移（方向）、旋转、缩放、不透明度、相同属性交互要一致。

在产品设计的前期设计师需要输出界面设计，为了方便下游前端工程师更好的规范和适配，也要保证产品后期上线产品视觉稿的高度还原，这就要求设计师输出一整套产品的视觉和交互规范。

重复配色

在 app store 的页面中使用了相同的颜色进行提醒，方便用户快速查找和点击，整体的蓝色又给人理性的感觉，看到付费app 的好评数可以看出是因为产品好才推荐你进行理性消费。

重复大小

INS 主页第一排头像相同大小进行重复排列，与内容的人物头像有大小对比之分；INS 搜索页采用了九宫格布局，为了重复中有变化它把右边的四个方格合并成一个内容展示区域，推荐好的热门视频。

重复间距

Airbnb 界面中的间距非常规范，首页大体采用了谷歌里面的8px 原则，每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。

重复组件

（如图标注）INS 界面中用了统一组件，相同的圆角和高度规范又给画面增加了统一性和连贯性。

2. 突变

在相同的形象重复出现时，尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。

格式塔原理中的相似性也是重复中突变的一种形式。

在产品设计中我们运用的突变的目的很简单就是为了让其更加突出，多用于区分当前状态、选中状态和默认状态。

banner轮播

banner轮播图上面的提示状态会根据当前状态和默认状态进行区分，把当前状态进行变化从而进行凸显出来。

导航栏分类

导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分，把当前状态进行变化从而进行凸显出来。

按钮

在登录注册页面中，我们会通过大的色块凸显登录按钮，引导用户快速登录进入到 app 里面。也减少了用户的思考过程，符合大脑的惰性。

但是在很多 windows系统中，卸载软件时会跟你玩文字游戏，会用非、否、不是等诱导你作出错误的判断。

feed流

feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。

站酷首页 feed流里面会把内容分为作品和文章，之前版本中的作品和文章的样式是一样的，新版本中重点是推作品，当文章出现时通过改变文章的排版进行区分，重复里面又带有变化。

3. 节奏感

多少元素排列可以形成节奏感，一般来说是3个或3个以上，两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。

左右滑动

（如图来自uistar）界面中三个书籍整齐的排列在一起，可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时，应考虑元素的数量，尽量不要超过10个以上。

列表页

（如图来自uistar）列表页面整齐的排列在一起有一定的节奏感，通过改变 icon 的配色来丰富画面。

4. 韵律

元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。

最美有物

最美有物app 的画报界面中，通过改变每个界面的大小比例有序的排列在一起，通过上下滑动可以快速浏览标题，进行查找翻阅，整个过程很流畅，整个界面有流动性和韵律感。

图表

图表在设计的时候通过不同颜色来区分不同的时间段，线条错落有致的排列增加了界面的韵律感。

配色

△ 来自Prakhar Neel Sharma和crisssamson

这两个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中，增加了画面的丰富感和韵律感。

重复在动效中如何运用才会有韵律感？

界面动效中主要分成当前状态动效变化和转场动效变化，界面中的元素a1对b1、a2对b2、a3对b3信息对等，能帮助界面做出很有韵律感的动效。

二、总结

重复可以使画面秩序化、整齐化，形成和谐、富有节奏感的视觉效果，更加有利于人们加强对画面的记忆。

重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的，几种不同的美感可以同时存在的，只不过它适应不同人群的审美能力，审美能力高一点的更喜欢一些变化，审美能力相对基础更喜欢简单的重复。

所以画面中不断出现同样的元素这叫重复，而在很多重复里面突然出现一个变化这叫突变，相同元素整齐的排列在一起这叫节奏感，而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

图片标签

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html>
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                    <meta charset="utf-8">
                

            

        

        


            


                


                

            

            


                

                    <title></title> 
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <h1>这是一个图片</h1>
                

            

        

        


            


                


                

            

            


                

                    <!-- 图片标签<img src=路径属性 alt：加载失败后显示的文本  width:指定图片宽度  height:指定图片高度  单位:px> 
                

            

        

        


            


                


                

            

            


                

                    路径属性：
                

            

        

        


            


                


                

            

            


                

                     绝对路径
                

            

        

        


            


                


                

            

            


                

                     E:\ruanjian\软件\环境\images
                

            

        

        


            


                


                

            

            


                

                     相对路径：相对于主文件位置的路径
                

            

        

        


            


                


                

            

            


                

                     同级：直接写文件名.后缀名
                

            

        

        


            


                


                

            

            


                

                     上级：../文件名.后缀名   ../返回上一级文件夹
                

            

        

        


            


                


                

            

            


                

                     下级：文件夹/文件名.后缀名
                

            

        

        


            


                


                

            

            


                

                     -->
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/ad.jpg" alt="加载中" width="1000px" height="500px">
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/1.jpg" alt="加载中"><br><br><br><br><br><br><br><br><br><br><br>
                

            

        

        


            


                


                

            

            


                

                    <img src="../footer.jpg" ><br>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

2018年Behance 上最值得关注的20个设计趋势...

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、设计师的现状

1. 设计师已经开始被人工智能取代

2018年紧跟2017，是人工智能重点发力的一年，关于「人工智能会完全取代设计师」的话语层出不穷，很多从业者倍感危机。

崔校长表示，AI 时代是真的来了，设计师也开始被人工智能所取代。

现在，很多负责垂直业务的运营设计师已经参与到智能体系建设中，建设素材库、设定配色、排版规则和标准，帮助训练 AI 等。

甚至美团点评也开发了可以做 Banner 的智能设计系统，不光可以做 Banner，今年内还可以自动生成活动主页和简单 H5 页面，而且是多品类覆盖，包括餐饮、休娱、丽人等。

相应的，设计部门原先计划申请的运营设计师人数就减少，甚至不新增了。

尽管 AI 的强势冲击很吓人，但是设计师工作中，例如设计师对目标受众的理解，现阶段是没有机器可以替代的，顶尖设计师的专业技能在冲击之下，反而会更加突出、显眼。

2. 国内设计师普遍话语权不高

在国外，很多优秀的公司都是设计驱动，而国内设计师普遍话语权不高。

针对这个现象，崔校长认为，实际上国外很多「设计驱动」的公司，本质上是 CEO 驱动，有一个重视用户体验的 CEO，那么全公司做事都会重视用户体验。实质上是 CEO 在驱动，设计仅仅是执行。

而在国内，行业环境没有那么舒服，特别是偏传统的公司，高管层对用户体验的价值认知非常弱，所以才会有设计师话语权低的问题。

如果要解决这个「历史难题」：

• 首先，设计团队本身要对用户体验有清晰正确的认识，不能唯设计、唯用户体验论；
• 然后，通过专业手段，既保障了用户体验，又良好的解决了商业问题，

那么一定是可以在业务团队那边赢得认可的。

有了实际案例证明价值，下一步就可以做一些跨团队的用户体验概念普及，去提供相关的认知度。

美团点评是一个高管层很重视用户体验的公司。在美团点评，用户体验部的价值是可以得到足够认可的。

在这样的情况下，大家依然会努力拓展自己的价值空间，会突破边界，比如说交互设计师会做一些用户研究和产品分析相关的事情。

项目产品 Leader 只需提供一个产品目标，而在「战略层、范围层、结构层、框架层、表现层」五个层面的分析研究和输出工作，交互设计师都可以完成，产出一个完整的项目提案报告。

由此可见，设计工作者只要有实际案例证明价值，得到 Leader 的认可，加上持之以恒的拓展自身价值，提高自身话语权不是问题。

3. 对产品设计的认识还停留在图形界面

很多刚工作的设计师摆脱不了专业的束缚，认为设计只是图形的搭建，没有更多思考。

对此，工作经验丰富，且阅人无数的崔校长表示，这是一个普遍现象，也是一个正常的现象。

在社会化精细分工的时代，设计师从专业入手，自然而然地，一开始认知会局限在图形界面上。随着专业级别的提升，会扩大认知范畴，看到界面之外的东西。这是基本规律，没有捷径。

古语说：

不谋全局者，不足谋一域。

设计师应该有意识去突破边界，这是正确的方向。现实中有很多人无法突破瓶颈，往往是拒绝突破边界，思维的局限导致了个人价值的局限。

4. 设计的好坏没有绝对的评判标准

大家都知道，设计是有好坏之分的，但却不一定清楚这个评判好坏的标准。

崔校长认为，设计师没有一个绝对标准来评判好坏的。

在商业团体中，一切资源投入都是为了达成商业目的，所以能帮助达成这个目的的设计就是好设计，这是一个评判标准。而具体的标准，根据团队的商业目的差异，有很大区别。

在商业团体中，用户体验是实现商业目的的一种手段，脱离商业目的，讲纯粹的用户体验就是耍流氓。

只有摆正了这个认识，在职场中就更容易获得成功。

二、设计师的突破

1. 保障用户体验是第一标准

现在，很多人都在倡导，设计规范化、组件化，这种趋势是有利有弊的。

针对这个趋势，崔校长建议，不能唯规范唯组件论。虽然规范化、组件化这类比较基本的设计增效手段，可以明显提升基层效率和基础质量，但是规范和组件只能保障底线，无法拉高设计质量的上限。

比如有的设计师会跟产品说，我们的规范如此，所以只能这么设计，这是错的，规范不是一刀切的标准，保障用户体验才是第一标准。

该用规范组件的时候就用，如果场景上不适用也不能硬用。

2. 用户体验设计，不仅仅要把界面做好看

作为用户体验设计师，要有把界面做美观的能力。

除此之外，崔校长还说：

界面好看是最表层的设计体现，真正的用户体验远不止于此。

《用户体验的要素》所描述的「战略层、范围层、结构层、框架层、表现层」五个要素，要做到都充分、专业、逻辑连贯，最终才能获得一个在线产品的良好用户体验。

在构建一个良好的用户体验时，更重要的是表现层背后的商业体系、产品目标、用户心智模型，对设计依据做充分的研究和挖掘才是根本。

3. 方法论为主导，找灵感

遭遇设计瓶颈时，找灵感也是有技巧的，有一部分设计师，凭空想灵感，这是低效的。

崔校长建议，以方法论为主导，找灵感。

崔校长说：

设计的目的是为了解决问题，应该以理性思维为主导，去定义问题，分析问题，解决问题。如果以 Idea 导向，也就是通过试错来验证有效 Idea，这跟碰运气差不多，效率非常低下。

在美团点评上海用户体验部的设计路径中，总体是以方法论来主导，仅在方案的表现层，会运用头脑风暴和素材搜集的方式帮助激发灵感、发散方案。

4. 注重自身和团队的共同成长

在学习、成长上，每个工作者都更注重自我的成长，这是必然的，设计师也不例外。

但工作究其根本，是自我成长、团队成长、产品成长的结合，优秀的团队一定都是非常注重这三方面成长的，美团点评也是如此。

崔校长说，美团点评有涵盖各个专业的互联网+大学，在设计方面设有设计学院，沉淀了很全很丰富的方法论和案例，同时公司还有复盘文化，大家会从每次的项目实践中，总结经验、获得知识。

崔校长建议，设计师应该尝试「跨界」，个人能在其中飞速成长，这是经验之谈。

校长本人是学计算机专业的，做过产品经理，最后在设计领域深耕。

这样的综合角色帮助他更宏观、更完整地去看产品体验搭建的过程；能够更好的理解上游产品角色到底关心什么，下游开发角色需要什么；能够更好的跟相关角色沟通，并让设计发挥更大的价值。

所以设计师不仅要注重外部学习环境，还要注重自身的跨界、不断拓宽边界，自身和团队共同成长，这对你职业生涯的发展产生不可估量的价值。

5. 优秀的设计团队不能没有管理者

设计不是单打独斗。

一个优秀的团队应该注意哪些问题呢 ?

对团队进步起着关键性作用的管理者应该是怎样的呢？

对此，崔校长认为，优秀的设计团队在团队建设上，要有完善的管理制度、完善的专业体系、扎实的人才梯队，在结果上要有优秀的产品案例。

作为 Leader ：

• 首先，要专业过硬、学习能力强、格局大；
• 然后，要赋能团队，用你的决策力赋能，给团队判断正确的方向，不走错路；
• 用专业能力赋能，指导团队提升专业高度；
• 用协调能力赋能，让团队运作更。

刚刚成为 leader 的同学，可能会不适应与设计师完全不同的工作模式。

对此，崔校长建议，此时你最需要注意的是思维转换。思维转换首先需要明确三个角色，崔校长总结为「三位一体管理模型」，分别是教练、裁判、经理，这三者缺一不可。

• 在项目过程中，要发挥教练角色，进行专业指导，保障设计输出质量，如果教练角色缺失，设计质量难以提高，设计师成长难。
• 在评审和决策的时候，要发挥裁判角色，给出明确的结论，承担决策责任，如果裁判角色缺失，容易变成甩锅侠，把自己的责任丢给基层设计师，设计质量容易失控，也会导致设计师压力过大，产生流失。
• 最后是经理角色，去思考团队建设，去选择团队需要的设计师，对设计师的绩效进行判断，识别出哪些应该重点培养，哪些应该淘汰换血。经理角色缺失会导致吃大锅饭的局面，团队能力止步不前，陷于平庸化。

6. 保持沟通

沟通，在设计师的工作内容中占了不小的比例。

跟团队同事进行合理的沟通，在一定程度上，能提高工作效率，专注设计质量，将更多的时间放在设计本身。

对此，美团点评崔校长很有发言权。

美团点评上海用户体验部现在有100多位设计师，对接的产品经理在500人以上，对接的程序员在1000人以上，而且上下游部门都是分散的。

产品部门和研发部门都是多个的，不像 UED ，只有一个部门统一管理，那么沟通方面确实有很大的难度。

崔校长表示，为了团队沟通更，美团点评内部要求 Leader 跟相关部门的 Leader 建立良好的沟通机制，保障信息通畅；然后，用设计流程规范，来要求设计师跟自己的上下游对接方充分沟通；最后，团队风格上推动设计师走出去，深入上下游讨论和协作，跟进产品讨论会，多到开发位置上确认实现的细节。

崔校长还分享了一个关于沟通的小故事：

在搬了办公区之后，产品的座位离设计师只有一个过道之隔，于是设计师开始有了一些「小烦恼」。产品经理一有问题就随时找设计师讨论，设计师的工作总被打断，却不太好意思拒绝产品。

这是一个比较有趣的现象，说明产品跟设计师之间沟通非常紧密，而且很信任设计师的专业度，能够一起有效地解决问题。

这个场景在团队内部时有发生，这个「烦恼」对设计师而言，可以说是不可避免的。

对此，崔校长建议设计师要做好时间管理，掌握好沟通的时间安排，不能影响了总体的设计效率。

总结

设计不设限，是每一个设计师都应该思考的方向。

只有自己不甘现状，勇敢突破，才能以更高的速度进步，才能在互联网高速发展的现在，甚至未来，成为最后的赢家。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。