做一个懂设计的程序员

作者: 帅气小伙 | 来源:发表于2016-06-20 19:03 被阅读5684次

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

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

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

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

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

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

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

    无任何设计基础

    无任何绘图经验

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

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

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

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

    相关文章

      网友评论

      • 5bc2201b048b:工具不错,希望能多分享
      • 岭南灯火:在艹c++和ArcEngine二次开发,一边又放不下作图修图和建模。。。。的事儿
      • theBugKiller:设计什么时候变成界面设计了!?
      • 7b46555021d5:所以,为什么会造楼了以后,还去砌砖呢?
      • 醉酒肆之:抽象得很棒,不过楼猪也该贴出自己的产品让大家观摩呢
        醉酒肆之:@帅气小伙 竟然还是大学狗,威武
        帅气小伙:@醉酒肆之 会的,不过要过一段时间,在考试月 :unamused:
      • lordkhan:有内容是我想要的😄
        帅气小伙:@lordkhan 是不是画图工具 :grin:
      • dd9e37902206:确实这个通篇讲的是交互的事,跟UI还是有点差车的,我想大多数设计多数说的就是程序的细节问题,比如图片有拉伸,或者差了那么几像素,有很多就是给了标注图,但是做出来和效果图也不会一样
        帅气小伙:@狗狗的污污 我之所以写这篇文章是因为,我的两个做网页前端的设计师小伙伴,转做APP设计图,做出来的设计图很非主流,于是我就对现行主流的APP进行分析,以此总结一些设计的套路,达到设计出一个像样一点的APP的目的。
      • 静晨:楼主说的设计是指交互设计和视觉设计,对程序员来说代码层面上的结构设计相对更重要,不过懂交互和视觉的话,会方便和设计师沟通,会让设计师妹子佩服的,好处可是大大的,毕竟不要老是让设计师觉得程序员是没有审美的生物
        帅气小伙:@静晨 知音,我的题目是想了好久的,我应该是用“会”还是“懂”,最后我选择了用懂,因为我在做项目的时候,发现一个合理的设计图,代码实现也是比较容易的,我就是要做一个懂得识别设计图的程序员。不然老是让UI妹子奴隶我,我不服啊,我要指出那些不合理的设计
      • FicowShen:好文
      • ChosenXu:大学是软件开发专业的,冲着“我要做一个懂设计的开发”,现在就从事 UI 设计的工作了
        帅气小伙:@ChosenXu 我猜你是因为,UI汉子给你设计的图,每次都实现不了,叫他改,然而这个B很懒,然后你被迫走上了UI设计的道路,请叫我福尔摩斯 :stuck_out_tongue_closed_eyes:
        ChosenXu:@帅气小伙 这样的比喻 😂 话说公司另一位 UI 也是汉子
        帅气小伙:@ChosenXu 阴差阳错,本以为可以征服UI妹子,但是被反征服了,可以大兄弟!
      • iimT:怎么感觉是篇软文😏
      • 7emini:辣鸡,好辣眼睛:joy:
      • 壹人一成:作为一名刚刚起步的程序员,很受鼓舞
      • 卓_然:这就是交互设计干的活吧,但写代码也有设计啊
        帅气小伙:@卓_然 肯定啊,代码必须规范才能够让多人同时并行开发,合理的代码结构设计提高的项目的开发效率和降低后期维护的成本。
        卓_然: @帅气小伙 我不是专业的 我只是写代码的 如何写出易理解,可扩展,高内聚低耦合的代码,也是需要设计的,建议给不出,相关的书诸如设计模式(gof headfirst),重构,代码简介之道,代码大全,effectv系列等等很多,这还只是代码层面,架构层面还有面向模式的软件体系架构系列,Ace相关,领域驱动开发等等,经典的太多
        帅气小伙:@卓_然 不知道啊,你如果是专业的,那请说说你的建议和理解,我写这篇文章的目的就是为了吸收建议的
      • 熊孩子CEO:看完发现,你并不了解 UI和美工,你通篇介绍,与其说设计,不如说交互体验
        帅气小伙: @熊孩子CEO 哈哈,终于等到了真正的设计师了,我确实不懂设计,我只是介绍一下我作为一个程序员如何去理解别人产品的设计,学习别人产品的思维过程,就是希望广大网友批评和建议,如果你不介意,请说说你的见解吧!非常感谢。
      • 67245d173000:你都不知道一边美工一边写代码的痛苦。。。。。哈哈
      • 与梦说:弱弱的问一句,如果做设计的想学UI的话,是不是还得学习编程
        帅气小伙: @与梦说 你看看我的文章,介绍思想的,明白了思想,代码就是说话那样简单
        与梦说:请问自学代码的话可行度高吗?
        帅气小伙: @与梦说 不是,如果做前端就要写代码
      • 5ddb875d5f27:谢谢
        帅气小伙: @阿飞陛下 赶紧分享给你的小伙伴,特别是设计师,来打我脸,大家交流交流
      • 飞汤猫:学习一下
      • a553bb57f5b2:感谢分享
      • 5110d9dbdc15:解决了我的问题
        帅气小伙: @小时候偷过土豆 什么问题
      • TPL:加油!爱思考让你更上一层楼!
      • afecc2094551:谢谢,不错
      • 奔跑吧小二:挺好的
      • 向日葵的笑:写得好
        帅气小伙:@向日葵的笑 感谢你的支持
      • 帅到掉漆:https://modao.cc/workspace#page/guide 安利墨刀安利墨刀!6到飞起的原型图神器!!另个人认为程序员不会P图无所谓,但最好懂一些设计原理比如色彩构成,平面构成,空间构成啥的
        帅到掉漆:@xcbxcb596479547 只想说这货比Axure,Visio之流人性化太多了233
        5a3830ede979:@伊利蠢牛奶 666,我们公司的美工居然用的这个做的demo
      • 9d359eb6364c:不过做产品的有专门的画原图的软件
        7a79714f3eb1:@倩倩飞吧 倒是说啊 为啥不说出来 那个x开头的实在感觉不好用
        于连林520wcf:@倩倩飞吧 同求
        帅气小伙:@倩倩飞吧 赶紧告诉我啊,别藏着
      • 9d359eb6364c:哈哈,帅小伙不错哈

      本文标题:做一个懂设计的程序员

      本文链接:https://www.haomeiwen.com/subject/ptvwdttx.html