程序员

注册

 

发新话题 回复该主题

近年为何程序员纷纷转行UI设计到底是什么 [复制链接]

1#
北京治白癜风去哪家医院最好 http://yyk.39.net/bj/zhuanke/89ac7.html

高度决定视野,视野决定未来。我先给大家讲一个有趣的故事:

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

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

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

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

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

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

无任何设计基础

无任何绘图经验

不懂PS

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

强大的抽象思维

模仿能力

总结能力

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

------------------------------

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

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

网易云音乐

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

网易云音乐首页

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

工具:Wireframing

Wireframing的界面

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

它的控件库

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

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

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

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

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

我所抽象的线框图

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

领悟配色(锻炼你的审美)

领悟布局(锻炼你的空间想象)

领悟交互(锻炼你的交互设计思维)

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

------------------------------

网页云音乐

QQ音乐

首页截屏

线框图

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

我们看这两幅图,能看懂什么问题吗?

首页都是有广告的。

采用了的分类方式是伪折叠式(它都是打开的,不允许用户折叠而已)。

采用标准的滑动式切换二级主分类(个性推荐,歌单,主播电台,排行榜)。

具有搜索功能的应用,搜索按钮永远都放在右上角(用户习惯)。

都不采用底部导航单,选用左滑抽屉式菜单(原来的网易云音乐是底部导航菜单的,现在果断抄了QQ音乐)。

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

以上是设计上的总结

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

广告轮播(

分享 转发
TOP
发新话题 回复该主题