做一个懂设计的程序员

转载已获作者授权

大家好，我是帅气小伙，今日我先给大家讲一个有趣的故事

三个工人在建筑工地砌墙。

有人问其中一个：“你在做什么？”这个工人没好气地说：“没看见我正在砌墙吗！”（十年后，该工人依然在建筑工地砌墙。）

他问第二个：“你在做什么？”得到的回答是：“我在建一栋大楼。”（十年后，该工人成了一位建筑承包商。）

最后，他问了第三个工人同样的问题，那个人哼着小调，欢快地说：“哈哈，你看，我在建造一座美丽的城市！”（十年后，这人成长为一位规划城市的大设计师。）

程序员就像软件工程里面的工人，如果你还是着眼于写代码，无异于上面所说的第一位工人，成为一名码农;如果你不仅着眼于写代码，而且你懂设计，你和第二名工人是一样的，你将会成为一名合格的项目负责人;如果你做到了着眼于整个项目的规划，那么你和第三名工人一样，你将会成为一名出色的架构师。

我现在是一名大学生，我现在要向第二步出发，做一名懂设计的程序员。

无任何设计基础

无任何绘图经验

不懂PS

这些方面的欠缺，也许很多程序员和我一样，成为了程序员学习设计的天然障碍。不过能成为程序员的你，有很多优势。

强大的抽象思维

模仿能力

总结能力

一、利用抽象思维学习做线框图

我是一名android程序员，我就以：“如何做一副让android程序员看得爽，做得爽的设计图”为例子，向大家介绍这个思路。

选择一款你喜欢的App（最好的千万级以上的，因为这里有非常多优秀的UI设计知识）

网易云音乐

选择某个页面作为你抽象的目标（最好是内容较多的页面）

网易云音乐首页

画出与页面相对应的线框图

工具：Wireframing

Wireframing的界面

一看界面，果断想起了eclipse，这款工具做出了的线框图是很变态的，他居然可以有Android端的控件（同时具有3个平台的，android，ios，windows）。

它的控件库

这款工具它还可以像演示PPT一样，展示你的交互设计，真的棒！

作为程序员，有时候真的是一图难求（自己不会P图），不过没关系，这款工具本身自带有图标。

它的图库还可以导入SVG的矢量图

你没看错，是Material Design风格，我再也不用忍受ios的设计稿对我的摧残了。

于是我就用它作为了我画图的工具

我所抽象的线框图

画好线框图是学好设计的第一步，也是让人家相信你懂设计的第一步，这个过程要多练习，多去感悟。

领悟配色（锻炼你的审美）

领悟布局（锻炼你的空间想象）

领悟交互（锻炼你的交互设计思维）

二、总结同一类型产品同一页面的线框图

网页云音乐

QQ音乐

首页截屏

线框图

你没有看错，网易云音乐跟QQ音乐就是这么相似，抽象了之后。

我们看这两幅图，能看懂什么问题吗？

1.首页都是有广告的

2.采用了的分类方式是伪折叠式（它都是打开的，不允许用户折叠而已）

3.采用标准的滑动式切换二级主分类（个性推荐，歌单，主播电台，排行榜）

4.具有搜索功能的应用，搜索按钮永远都放在右上角（用户习惯）

5.都不采用底部导航单，选用左滑抽屉式菜单（原来的网易云音乐是底部导航菜单的，现在果断抄了QQ音乐）

6.都采用了循环式滑动切换一级主分类（QQ音乐，在音乐馆这个一级分类下，二级分类为精选，向左滑，就跳到了“我的”这个一级主分类），简书也是这种设计。可以说这是一种设计的趋势吧。

以上是设计上的总结

作为一名程序员，在看了别人的产品之后，一定会想它是怎么实现的。

1.广告轮播（com.bigkoo:convenientbanner:2.0.5）

2.碎片化页面（viewpager+viewpagerindicator+fragement）

3.伪折叠式分类（多个recyclerview+头部+竖直或水平布局管理器）

4.侧滑菜单框架（有很多）

三、理解设计意图

为什么网易云音乐和QQ音乐的推荐页都不允许下拉刷新？

下拉刷新不是随便用的，使用下拉刷新的条件如下

后台数据时刻发生改变（例如消息列表）。

后台数据岁时间增加（用户可以增加内容的情况下）内容页面数据有限，通过下拉刷新增加页面内容。

而推荐页面是受应用方管理的，它不会时刻变化，因此避免下拉刷新而造成重复数据的请求，节省用户流量。

为什么如今大多数产品都会采用广告轮播式的方式向用户展示？

以前我记得某新闻很喜欢用推送的方式去搞广告，这让很多用户反感，而广告轮播式，不仅增加了页面的多样式，而且提高了应用的质量。我认为一个好的应用：“应该是让用户自己去学着怎么玩，而不是用一大堆强制的方法去教用户如何使用”，广告轮播的方式相对后台的暴力推送，还给了用户更多的自由，使界面看起来更多元化。

为什么要向用户展示歌曲的收听数？

别笑，没做过互联网的往往会忽略这一点。这个收听数，是一种运营策略，利用的是从众心理，例如淘宝，你买的东西的时候，都会看销量，看多少人买，然后你就跟着买了。

四、理解产品定位与设计的关系

界面设计是建立在产品定位的的基础上的。

图片来自网络

这是用户点开应用看到的第一页

QQ音乐作为腾讯的附属产品，更偏向于工具，它一开始为用户展示的就是QQ音乐的功能，而QQ音乐不用担心它是否能够黏住用户，而他更专注于功能。

网易云音乐则通过强大的算法，为用户提供个性化歌曲推荐，以此作为提高用户粘度的产品运营策略，建立音乐社区，提高应用的活跃度。

首页真的太重要了，它能够看出一个产品的定位和产品的成败，所有首页应该慎重考虑

五、总结

如果你是一名美工，你多思考一下就能做一名UI设计师；

如果你是一名UI设计师，你多比较一下就能做一名合格产品经理；

如果你是一名程序员，你多理解一下就能成为一个项目负责人。

高度决定视野，视野决定未来

文／帅气小伙（简书作者）

原文链接：http://www.jianshu.com/p/5ea5a67d5c91

本文转载自异步社区

原文链接：https://www.epubit.com/articleDetails?id=NC7E3EF90E4500001A93E19501C6015DF