做一个懂设计的程序员

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

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

有人问其中一个:“你在做什么?”这个工人没好气地说:“没看见我正在砌墙吗!”(十年后,该工人依然在建筑工地砌墙。)

他问第二个:“你在做什么?”得到的回答是:“我在建一栋大楼。”(十年后,该工人成了一位建筑承包商。)

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

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

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

无任何设计基础

无任何绘图经验

不懂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设计师,你多比较一下就能做一名合格产品经理;

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

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

我是帅气小伙,喜欢我就点我吧,欢迎大家提出更好的建议。欢迎设计师来打我脸!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容