分享
码农如何从零开始做出有设计感的app？
我是一个后端的码农，想学习独立开发出一个有设计感的app～ 开发上，我有一点js的基础，打算学习react native，跨平台的特性还是很吸引我的～也欢迎大家指点技术原型上的不足之处。 设计上，我对移动app设计毫无概念T_T 从我目前狭隘的视角来看，我觉得需学习的知识有三个层面： 1. 宏观的设计原则和设计思维 2. app的整体设计框架 3. 具体细节，小至一个导航栏，甚至小至一个图标 那么，请大家指点： 1. 如何掌握设计原则，并培养自己的设计感？ 2. app有无类似Bootstrap的整体框架？没有的话，整体界面如何设计呢？ 3. 具体细节上，是否有静态资源的素材库，以及动态效果的素材库呢，能否推荐一二？ 4. 设计阶段的产出是什么，如何与后续开发结合起来呢？ 感谢大家～
回复 ( 10 )
我来答点Android相关的吧，虽然可能不大切题。
Material Design是一套非常适合开发者掌握的设计语言。它对各类元素都有非常详尽，以至于一些设计师视之为桎梏的规范。
做一个设计上60分的Android App，你只需要2个东西：google.com/design/spec新建完后挑选主题色，请到
程序内的各项动作图标，请千万别从网上下载各种细线体的iOS风格图标，不仅和Android格格不入，还很可能出现重心不一、意义不明的情况。请直接使用Material Design图标库，方法是在Android Studio里右键-New-Vector Asset。
程序内的各项元素，请尽量使用design-support所提供的组件。比如fab、snack bar等等，通常情况下工程师自己草草设计并自定义的view是很难像官方控件一样考虑到各种复杂的情景，并保持优秀的性能的。
当你不知道文字该用什么字号时，同样请看，注意20sp以下中文比英文多1即可。
当你不知道如何设计动效时，android:animateLayoutChanges=”true”一句足够了——RecyclerView内除外。
当你需要为App设计一个图标而完全没有美术功底时，直接Android Asset Studio生成一个也算能用。请不要自作主张加上圆角矩形底，在Android上，我找不出圆角矩形底的任何正面意义。
Elevation是Material Design的精髓，请务必参照，为合适的元素选择合适的高度，虽然4.x的兼容会花你一点时间，但请相信，那是值得的。
最后，
不要使用底Tab。
不要使用底Tab。
不要使用底Tab。
底Tab到如今，已经不止是一个设计问题，更是升华为宗教问题了。如果你使用了底Tab，那么不管你其他方面做得多么优秀，至少和用户口碑中的「优秀设计」无缘了。
利益相关：刚上手半年的独立开发者 –
（iPad答题，请容忍糟糕排版>_<）
这个问题其实有两个思路，你是现在就想做个美美哒app，还是像先变成设计师再做美美哒app，如果是后者，请参考其他答案～
职业之间的信息不对称啊，你以为设计师都是一个像素一个像素从头搭的吗，不不不，我们也是有偷懒的诀窍的。。。读完此篇，只要你有ps或者sketch，知道图层的概念，可以把元素导出为所需格式，app的活儿你就能一个人干了。
你的设计难度会从 —
变成 —
— 提纲 —
1. 做app需要图标，我又不会画，怎么办？搜到一些现成的，但质量又不高，怎么办？图标不成套怎么办？
2. 没有审美怎么办？
3. 心里有个app想法，但是线框图画不出来怎么办？
4. iOS那么多尺寸，Android尺寸更吓人，全都要记住吗，导出@1x@2x@3x点九图什么的是不是很麻烦？
5. 说了这么多，还是要我从空白画布上画吗？！没有美术基础啊！当然不是啦～
6. 还有什么问题可以提问哈。
— 正文 —
1. 图标苦手怎么办
就算是设计师，一个一个画图标也是很累的。
这时候，如果有钱，请到选项到A；如果没钱或者不想花钱，请到选项B。
A 如果非常有钱，请直接把钱给我，我把图标给你哈哈哈。如果有一点钱，可以去
可以调大小，可以改颜色，可以调线条粗细，用上这些，是不是b格噌得就上天了！这些都是顶级设计师放出来的免费资源，你花钱雇的设计师未必画得出来。。。
2. 没有审美怎么办？
这个就没有特效药了。据我的观察，没有审美天赋的人，可以判断好看和不好看，但无法判断好看和更好看，这时候如果你有个设计师朋友，请付费或者请吃饭，向他咨询咨询吧。
疗程缓慢的办法有：多看dribbble（eye candy多，但可以了解趋势和审美取向），多用好评和获奖的app，“最美应用”你下载了吗？“豌豆荚设计奖”你看了吗？（@马力请点赞～）每年app store 的盘点你都关注了吗？
3. 构思不好app流程怎么办？
$1 prototype大法，来自一本同名书，我刚看完个开头，所以以下是我根据它的目录和我的经验编的。。。具体就是“场景” – “过程” – “界面”。
先想象用户在什么情况下用，涉及几个用户，他们在干什么。比如，yelp，是用户需要找地方吃饭，所以一般只有一个用户（相对于uber两方用户，群聊n方用户），输入是一些查询条件，输出是在哪儿有饭吃。
现在细化过程，用户从打开app到达到目标，有哪些步骤。还是yelp，一般情况就是打开app，输入查询条件，看到结果，筛选，满意的话查看商家详情，不满意的话可能重新搜索可能更改筛选条件。这是主线剧情，还有些支线剧情，比如看到一个用户的评价很好，查看用户的其他评价，follow用户；还有自己身在餐馆，拍了菜单拍了菜，上传到yelp。把所有的剧情，都在流程图上画出来。
期间可能会遇到一些细节。用户先输入什么呢，是餐厅类型，还是只要能吃就可以？距离这个信息是gps给还是用户自己输，或者其实距离无所谓，反正用户有车呢？价格是什么时候出现？是搜索的时候就限定价格，还是结果出来以后再筛选？这些都不怕，反正也是要改的。。。而且一般自己想做的app也没有这么复杂。
你有一个流程图了，界面就简单了。把元素往界面上摆一摆，推荐用手机大小的便利贴，拿铅笔画上去，有很多东西玩app多了都有经验，搜索结果是啥，不就map view和list view么，怎么筛选，放一个漏斗icon在标题栏里呗，酱酱酿酿就好了。接下来就是把亲朋好友拉过来，让他们玩一下这个paper prototype，发现不对的地方再改。
有两个软件推荐，一个
再举一个。
这些全是一整套，一整套啊，意味着登陆界面，dashboard，阅读文章的界面，购物车，天气，聊天对话各种界面都很可能有。格式一般都有ps，sketch两种，有时有ai，和设计师打包给你的成品差距不大，你可能需要一个切图仔，或者自己来。
这些不够怎么办？
这样总行了吧。
6. 其他问题。
应该没有其他问题了吧。有的话评论区留言吧～
谢谢大家阅读。
1：设备。自从入了imac 27 retina之后，感觉做的设计比以前高大上了许多许多。
2：借鉴。程序员做设计，很重要的一部分是借鉴，切勿自己乱画，多看一些优秀的app，从中借鉴自己可用的部分。
3：简洁风。切勿搞的花里胡哨，你又hold不住，我们就走简洁风，能少则少，扁平化。
4：素材。收集素材啊，icon一定用现成的包啊，素材网站多搜搜啊。
5：切勿不搞设计稿直接就开始用代码绘制啊。很重要，例如前端，千万别用代码调整来看效果，先把设计稿做好再，别急，用代码绘制界面调整，一点设计的感觉都没有，给自己多点时间思考一些代码之外的事情。
过100赞，把最近设计的两个app晒出来。
多抄多抄，然后自己做微创新，别说码农，很多国内的设计师还是这样.. .
作为码农就老老实实抄(or 模仿)吧
之前我太太发现iphone不支持gif。实际上是支持的，怎么支持呢。我给她做个app就可以了。
然后约定好了，她做产品经理，我给她当设计和程序。
她是个不合格的产品经理，我于是闹情绪，于是这个产品连个说明书都没好好写。虽然已经上架，但是好久没有更新过了，我也不打算更新了。
视频地址：
下图，进入app以后就是三粒button，一个大logo。右上角的i点击以后显示一些版权版本信息。
下面左边的是视频转gif的按钮 右边是打开gif列表。
背景是打开摄像头然后模糊然后加了个深色的滤镜。
下图，点击转化视频的button以后可以显示手机视频列表。最先一个框可以拍视频。格子不要那么密，格子间距稍微大一点。返回主页的icon和拍摄的icon，都这么做，怎么做好看看自己审美了。
下图是选取视频片段，抄的instagram的，没什么好说的。。。
下图是选滤镜，也没啥好说的。
下图，转化完成，social icons来自于一个社会化sdk的网站。
下图，如何上传的图片来自电脑截图，文字用黑体字标出重点，其他字颜色浅一点。用纯黑纯白的字是很丑的。所以这点注意。
下图是显示的版本信息什么的，注意到滤镜和版本这挂的照片就是那个不负责任的产品经理。挂照片的目的和知乎上没事挂别人截图是一样的，表示愤慨之类的情绪。版本实际上是1.2了好像，但下面还显示1.0，因为我也撂挑子了。注意字的颜色不要纯黑，纯黑太丑。
以上大概就是这个app了。对于这个app，设计要点如下：
1.简洁，多余的不要，连说明书我都省了。（省说明书那个只能说明我懒和烂。。。）
2.流行什么就做什么。icon的线条要多细做多细。
3.配色能少就少，这里就是黑灰和一个主色调的蓝。
4.有选择的抄，比如体验好的大家都习惯的就直接拿过来吧。
——
占个坑回头更
分享近期为内部培训 React native 写的材料和视频
![]()
一直想找机会更新 MIHTool，又跟不上 Swift 的步伐，已经用自己的 MVC + ReactJS 写了两个管理系统，所以开始折腾 React Native， 结果是很迅速就搭起团队目前负责的 App, 收获不少，然后就在自己内部团队开始培训 React Native 开发（其实内部受众都是客户端开发工程师，培训非常艰难，因为90%都是前端知识。）我把资料都放到 GitBook 上了，视频因为目前在国外暂时只放到 Youtube，内容持续更新。 培训的目的不是精通，而是掌握如何开发。
[书地址, 有中文视频](react-native training)
大纲：
“`
Introduction
1 First look
1.1 Building an app in 5 minutes
1.2 How it works
1.3 Debug tools
1.4 DOCs & APIs
1.5 Resources
2 Components
2.1 Render & JSX
2.2 View, Text, Image, etc
2.3 Lifecyle
2.4 Props & States
2.5 Events
2.6 Resources
3 Styles
3.1 Flexbox
3.2 Absolute & Relative
3.3 Size & Dimensions & onLayout
3.4 Inheritance
3.5 Resources
4 Architecture
4.1 Redux
4.2 react-redux
4.3 Containers & Components
4.4 Todo React Native App
4.5 Naming convention
4.6 Resources
5 Data
5.1 Fetch
5.2 Persistent
5.3 Resources
6 Router
6.1 Navigator
6.2 Resources
7 Native Modules
7.1 iOS
7.1.1 JS call OC
7.1.2 OC call JS
7.1.3 Native View Component
7.2 Android
7.2.1 JS call Java
7.2.2 Java call JS
7.2.3 Native View Component
7.3 Resources
8 Integration
8.1 iOS
8.1.1 Package
8.1.2 Image
8.2 Android
8.2.1 Package
8.2.2 Image
8.3 Before publishing
8.4 Resources
9 Hot Update
9.1 iOS
9.2 Android
10.3 Resources
Resources
“`
用angular做前端数据展示数据处理，然后你后台写好接口API返回json给前台js处理，前后台就完好分开了，就可以打包成wepapp，boostrap更多是样式不是框架，现阶段感觉不大好用react，暂时不要跳进去～
1. 如何掌握设计原则，并培养自己的设计感？
简单来说设计原则就两个，一个是形式追随功能（或者叫需求），一个是流行。前者主要靠抽象逻辑能力。后者主要靠语言、情感和运气，也靠一些逻辑。改变世界的往往是前者，赚钱速度不错风险较小的往往是后者。理解设计原则需要一个实践过程，做多自然就懂了，放心。程序员大多受功能主义影响，不擅长流行的部分，完全不考虑也无所谓，开心就好。
培养设计感先看看《Objectified》。哪部纪录片让你开阔了眼界，并且长了很多知识，而且让你有回头再看的念想？ – Catt Liu 的回答
2. App 有无类似 Bootstrap 的整体框架？没有的话，整体界面如何设计呢？
第一问，不太懂。第二问，了解下 iOS Human Interface Guidelines: Designing for iOS 和 Google Material Design 这两个目前最新的移动端设计规范，使用前人已经弄得比较好用的零件，结合自己产品所要解决的问题，组装起来。如果不知道怎么组装好，最直接的办法是把所有组合遍历一遍，挨个亲自感受。很多设计公司所谓的设计方法论就是把遍历过程拆分分工压缩时间，加入更多随机因素，加入合适的迭代进化机制，以便提升遍历全面度和遍历速度，但本质上还是遍历。桌面端设计大同小异，区别在于屏幕面积和使用场景不同，导致一些子环节的设计目标与移动端不同，但设计原理还是一样。
3. 具体细节上，是否有静态资源的素材库，以及动态效果的素材库呢，能否推荐一二？
我曾经花了很多钱买这些资源，但后来发现这些东西完全没用，因为这些东西码在一起好看，单个拿出来质量就不行了，而且可以用钱买到的设计模板也缺乏独特性，往往实际工作要求设计师要做出与众不同的亮点。通用的设计范式永远比不过专门针对某个问题的。不过如果设计的某些地方不是最关键的，还是可以使用的，比如交给设计实习生一些模板，让他套用，至少能保证一个平均水准。
如果想感受下这些码在一起的好看感觉，可以看看这个
4. 设计阶段的产出是什么，如何与后续开发结合起来呢？
产出就是一套是让开发人员/阶段，尽量不用去想产品的设计问题，只需要专心写代码的，对产品的全面描述。往往以一套文档，辅助一些表格、类似 UML 的图、界面静态的展示图、动画，甚至是产品某些细节的可交互原型等，这些形式呈现。
和后续开发结合就是大家要用统一的语言沟通，对设计和开发全包的个人来说问题不大。多人水就深了。除了语言要一致，人月的安排，迭代周期的安排，review 的会议机制等都要考虑。太多了两三句说不清，需要阅读专门的书并结合实践去感悟。
不要关注技术层面，先用1000个主流的app，分析一下，建议先无视国产的。
分析的思路先从iOS和Android的平台规范来衡量，用多了以后再从是否有改进平台规范的角度来思考比较。
等你做完这些功课，可以转行做产品经理了。
想要解决视觉，需要其他技能，还是找个设计师吧。
既然是从零开始，那么最好的方式就是使用现成的框架和组件，用现成的，用现成的。
1.现在很多框架都提供了很丰富的样式库可以直接用的，这些样式库都是经过开发者精心设计的，比起自己从头学要快很多。比如其他回答里面的Material Design和ionic Components。但是不推荐Meterial Desigin！！！Google的MD虽然是一门很精简舒服的设计语言，初看似乎很好学，但是这种越简单的设计，其实越难驾驭！如果你毫无设计经验，最终排版，布局出来的APP可能并不会给人简洁清爽的感觉，而是单调乏味！
2.楼主想学React Native,RN自然是有自己的样式组件库的，可以参考这里的RN学习资源指南：整理了一份React-Native学习指南。
3.然而用现有的库和组件终究是从程序员的角度出发，楼主要做出有设计感的APP，恐怕满足这两点还不行，所以这第三点最重要：抄！虽然也是用现成的，但是毕竟要做出有设计感的APP，就不能从程序员的角度去思考。国外有很多优秀的设计网站，上面有许多设计师做的APP原型，非常赞，其实可以down下来自己修修改改。抄多了，设计感自然就出来了。平时没事的时候可以上上dribbble，或者UI中国，站酷，花瓣这种设计类网站，培养一下审美。。也可以多逛一下apple stroe，上面有许多小而美的APP的，可以下下来自己体验一发。安卓下推荐豌豆夹和最美应用，都有介绍一些很多设计感的APP的。
4.设计阶段的产出是什么？楼主的意思应该是从一个独立开发者来说的吧，我觉得设计的产出就应该是整个APP的视觉稿（包括开发用到的所有素材）和交互（页面的动态交互和跳转逻辑）。设计的时候其实就应该考虑到了后续开发的实现的，比如设计一个侧边栏组件，其实你脑中最开始是有一个组件原型的，只是在设计阶段基于这个原因进行修饰和改造罢了，所以程序员做设计与设计师做设计的一大区别是：程序员在最开始就知道该怎么用代码写了。
最后，强烈推荐一本书：写给大家看的设计书（第3版） (豆瓣)
这本书对于楼主想掌握设计原则实在是再合适不过了：）