UI实战案例！一个完整的App是如何从零开始做出来的？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
UI实战案例！一个完整的App是如何从零开始做出来的？
今天这篇是一个完整的App 产出过程，从构思，画原型，到定视觉风格和规范，再到出视觉稿和动效，都是由一个人完成的，本篇就此次作品的流程讲解一下。
欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟。
第一步（构思部分）：想和看
想什么？呢，当然是想我们要创作出一个什么样的作品，可以是自己喜欢的产品，做个redesign什么的。也可以是一个大杂烩功能整合，但是尽量不要做差异太大的两种产品，比如佛学类和陌生人社交（yuepao）这两类的结合就有点坑爹了：D 总不能和尚约和尚我们出来一起念经对吧。
1.互联网热点新闻、黑科技等前沿科技报告。
2.国外设计资源网站（behance、dribbble）。
3.看自己对什么比较感兴趣，兴趣是支撑你一直坚持设计下去的动力。虽然我自己也不是很喜欢骑单车，蛋疼。
经过前两步应该有一点小想法了吧，那么我们可以开始考虑整一个产品的框架还有风格的走向。在看的过程中你可能对这两点已经有了方向，但是没有落地依然还是很虚的。好那么我们就要拿起你的手中的纸和笔，将你的想法都写下来。无论是什么想法都要写，创意点，功能，交互，风格，目标人群，色彩，等等。这里我们不需要考虑商业问题，因为我们不是在创业，而是在创作。但是逻辑一定要清晰。
第二步（交互部分）画和写
构思和画框架，因为时间有限我做出了主要的一些功能和说明。来看一下我写的结构图：
其实功能不多对不对，嗯千万不要给自己挖坑，做一个轻量型的就行了，除非你打算做一年。
理清页面的逻辑这边也是非常重要的一个环节，因为即便这次我们不考虑商业问题，但是用户界面是基于用户操作的，如果连逻辑都梳理不通，那真的就是一个花架子，做UI的朋友这点要注意喔。
好，下面再来看一下我画的纸质原型，字丑多担待：
其实看上去页面很多其实只做了几个一级页面，纸质原型的好处就是想到哪就可以改到哪，草稿部分我就不发出来了，辣眼睛。
第三步：（视觉）除了磨就是磨
视觉部分占了这次设计的大头，虽然只是短短十几个页面，但是有一半的页面是花了1，2个小时才设计出来的，经常遇到的问题就是花大半个小时设计出一张，不满意重新推翻再设计，反复修改。那么我们在做页面的时候通常需要考虑一下几点：
一个产品的色彩，大致能反映出该产品的性格、品味、气质。一款优秀的产品，在配色上他也是具有这些特质的。使用的颜色将决定了我们的产品将是一种什么样的风格，是热情，是低调，还是欢乐。那么这次我用了饱和度不高的深蓝色为背景色，搭配一种饱和度不高的亮蓝色和桃色作为产品的主色和辅色，目的是为了让用户感知到有蓝色的运动、科技感，深色的低调收敛感，还有桃色的跳跃，惊喜感。当我们在使用这3种色彩的时候，不是肆无忌惮的乱用，而是需要恰如其分的使用。比如亮蓝色和桃色我们不能大面积的使用这样会破坏整个页面的氛围。
我通常使用，也是很多画原画朋友用的一种方法，就是设计完一张页面，我会缩小的去看整张页面大致的色彩分布情况，亮蓝色和桃色作为引导和提醒使用是最好不过。
2. 信息布局和层次的展现；
说完了配色，说一下信息布局和层次展现的小技巧。思考场景是我们需要先想到的，用户在导航时候的场景，和在添加路线时候的场景是不一样的，操作方式也是不同的，一般信息布局首先我会将相关联的内容靠近摆放，或者沿着视觉流顺序摆放。层次展现一般是控制元素的大小，颜色深浅，粗细，远近等几个因素来区分。
3.是否符合用户操作习惯；
思考用户手指的操作热力图，和使用场景，将重点操作功能置于下部分，信息展现置于上部分、返回在右上角、左滑删除，长按删除等等。
4.交互的连贯性和合理性等等；
比如通常页面的返回是在左上角用箭头的形式展现，如果其中一个页面的返回跑到了右上角用文字展现，这样的方式就是不连贯的，也是违背了用户的操作习惯的设计。
再比如一个箭头给用户的感觉是下拉，但是如果操作结果是跳转页面，那就违背了用户的预期，是不好的体验，就是不合理的。
5.各种状态和极值
这次练习不考虑开发，所以这条就不写了。但是在我们日常项目当中，这些是需要画，并且画的更全面的。
还有每次做设计练习都会先定好一个视觉规范，举几个例子（当然不止这4点）：
1.字体：通常我会在一倍尺寸下使用18，16，14，12，10的字体大小，18用于顶部标题，16用作标题或正文，14号可以用作说明，12号可以用做提示，10号字用作小标签。
2.字色：字体颜色通常使用3个层次深浅即可，切忌不能使用纯黑色。
3.线条：1倍图我用的是#dddddd，0.5px。这个其实不用那么死板，就像每台电视机适合自己的参数都是不同的，可能你家产品适合用1px，或者别的颜色。
4.栅格。栅格的用处可是非常大，栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。从报纸、杂志，到手机界面，栅格系统全面渗透到各种信息传达的界面当中。具体什么是栅格系统，不在这里多说，大家可以去百度一下。
还有每次做设计练习都会先定好一个视觉规范，比如用什么字体，用几种字体大小和颜色，线条粗细颜色，主色辅色点睛色的敲定，栅格的排列等等，尽量使所有页面看起来统一有格调。
等等，你问我颜色是怎么搭配的？我又要安利dribbble了，追波每一个作品边上会有一张该作品的配色条，很多优秀的作品的配色都可以做参考。但是这次我选择的配色倒是自己瞎选选出来的，本身做东西喜欢蓝色系，再加上颜色和产品的调性比较搭，然后配上一个桃色，哈哈。
第四步（包装/动效）考验排版的时候到了
其实每一步都很让我纠结，有一天我页面做完了打算做长图，想了一天都没想出来，索性放弃了。第二天晚上做了两三个小时就做完了长图。然后开始磨动效，这边使用了principle和ae两个软件，真的灰常好用。
在最后展示作品之前我想说：创意是羽毛，想法是皮肤，工具是肌肉，思维是骨骼，缺一不可。
欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟：
「人气过万的优秀实战案例教程」
大众点评：
红包预热HTML 5：
火影游戏HTML 5：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
轻松10招，教你用Sketch绘制美观可维护的数据图
编者按：今天这篇好文，@Alpha_Lynnn 手把手教你用Skecth 生成数据图的坐标轴、实现数据节点、制作波峰波谷，绘制散点图等等，都是动图演示，简单...
@承载载 之前写了篇文章谈谈未来 APP 产品设计的革命性趋势，我突然发现一个问题，文章本身其实是谈的一种趋势，是一种更需要激发想象力的事情，不是一个...小伙伴们还记得上期的《35个超赞的IOS App网站欣赏》吗？最新一期的iOS App网站欣赏又来了~ 半年多时间过去了，iOS吹起了轰轰烈烈的扁平化...随着用户对UI的喜好开始偏向简约，设计师有必要将整个UI简化剥离至基本状态，因为保留关键元素才是成功的钥匙。从某种意义上说，极简主义的设计是形式和功能...我们对音乐的渴求，一刻都不曾减少。现在无论上班途中、休息还是工作，我们总习惯先享受一下听觉的盛宴。毫不夸张地说，音乐已成为了我们生活的一部分。 有很多...小文一篇，话题仍与上周衔接，小结了五种在iOS中向用户申请权限的实践模式，可参考。下面进入译文。 对于iOS app，当功能涉及到推送通知、访问照片或...昨天，小编一手握着早餐，一手拿手机发微博，心情激动，要把和女神约会的消息晒给基友们看。图片上传、单手打字，一切似乎都很顺利，微博就要发送了！不过发送按...
我们的团队
大家在关注&&6865 阅读
作为一个程序员，如果没有写过一个自己的网站，总觉这个职业生涯是残缺不全的。话说哪些做基础研究如算法或OS的大佬，尽可以鄙夷这样的思维，但如你我般普通非大神类程序猿，却没有深度，也应该有点广度。
回想第一个“网站”是我用VimWIKI生成的HTML，通过
file:///D:/vimwiki/html/links.html
来访问（到如今它依然管用！）。接着尝试了WAMP（把LAMP中的L改成W，即Linux变Windows），不错，依然可行，通过
localhost://127.0.0.1
可以访问了。但我仍旧喜欢file协议。接下来租了一个国内VPS，便宜但不够稳定。但个人网站就不计较了。不过同步的方法很傻，通过FileZilla文件传输过去。后来用SVN进行版本控制，感觉没那么山寨了。
这个阶段的工作很简单，学习VimWIKI的语法，写文档，生成HTML。整个网站也异常简单，申请一个域名，租用一个便宜的Linux VPS，安装一个Apache，用SVN控制版本与发布。那时对HTML都很陌生，更无论JavaScript、CSS之流。动态页面的概念，还很遥远。
过了不久，因为工作的需求，要自己写一个真正的网站了，那才第一次与LAMP亲密接触。应对一个陌生领域，我的基本对策就是买一打五星级的书。我最偏爱的图书就是以 XXX Programming Language 命名的图书，霸气且经久耐用（好比 C Programming Language、C++ Programming Language 吧）。按这个原则，买了几本PHP、JavaScript、CSS、Mysql的书。HTML好书真的难找，我买的是图灵出版的《精通CSS与HTML设计模式》（选书的另一个原则就是看出版社）。不过要说这段时间的最强偏爱，还是图灵的另一本：《SQL反模式》（如果你偏爱 Effective C++或 Effective TCP/IP Programming，那这本书也不容错过了）。我没有在用什么语言写网站上花费什么时间，Java、PHP、以及MS的语言、环境对我而言同样陌生；Python虽然略会一点，但我仍随大流，以及参考以前同事的擅长。
这次租了Linode的VPS，稳定性绝佳。发送邮件的任务，起初用sendmail，很快切换到网易的免费企业邮箱，过了数月，发现很快超过网易邮箱限额，于是又切换到Google APP的免费邮箱服务。网站方面，用PHP交缠HTML，总觉得很丑陋，于是用了Smarty模版，把逻辑与展现分离；虽然没碰到性能方面的问题（嗯，访问量还太小），但等到在Smarty中也要用变量、循环等方式时，还是颇有些后悔。想想还是对PHP的使用不够熟练使然。至于那些XXX框架，每当我想要尝试时，就想起Randy Pausch《最后一课》中讲的：
基本功，基本功，还是基本功。基本功不好，上层花哨的东西你就玩不转。
从零开始，你才知道你真正需要的是什么；启用已有的成熟方案，已是后一步的事。四处打听什么好、什么强，真是很傻很天真；好比小马过河的教训，自己做了才知道。
后来了解了Bootstrap，运用后，又再次较大规模的改进了网站（前一次是用Smarty时）。嗯，现在问题的关键，又演变为怎么拆分、组织数据，这才是根本之道。近日买了《淘宝技术这十年》，说到底，依然是数据拆分、组织的问题。什么语言、框架、协议，最后都要让位于最基本的业务逻辑。
又后来，Linode北美服务器大规模不能访问，甚至从北美Linode访问国内也有问题。只好租了另一个Linode日本VPS作为跳转。某些函数调用改为HTTP远程调用；用Git替换了SVN；SSH每次要通过日本中转。等等。
现在网站很少有独立存在者，与其他大网站的API交互也是势在必行。要学习的东西也很多。就如古话说的，你了解的东西越多，不了解的东西就越多。像王兴说每年毕业季总推荐胡适伯伯的《赠与今年的大学毕业生》，保持自己的兴趣、好奇心才更为重要 ；）
本书适合SQL 数据库开发人员与管理人员阅读。&nbsp&#8250&nbsp&nbsp&#8250&nbsp
Android从零开始：创建样式和主题
原文：&作为一个安卓开发者，我们一般把焦点放在app的功能上。但是仅仅有功能是不够的。在拥有上百万app的Google Play上面，界面和功能一样重要。如果你不相信，可以去看看Google Play&中的app。有两种方法可以改变app的外观。第一种就是直接在xml中直接修改View的属性。这种方法只适合于只有几个View和Activity的简单app。第二种方法就是创建自定义的样式和主题。如果你对web开发熟悉，第一种方法类似于使用内联的CSS样式，而第二种类似于使用style sheets。本文，你将学到如何创建自定义的样式和主题。你还能学到如何使用Android Studio的工具和快捷方式来加快样式的创建。1.&创建Styles样式显然是应用到UI控件上面的。因此，让我们先创建一个新的空activity并添加两个View到布局文件中。&View&android:layout_width=&100dp&
&&&&android:layout_height=&100dp&
&&&&android:layout_margin=&5dp&
&&&&android:background=&#009688&
&&&&android:id=&@+id/box1&&/&
&View&android:layout_width=&100dp&
&&&&android:layout_height=&100dp&
&&&&android:background=&#00BCD4&
&&&&android:layout_margin=&5dp&
&&&&android:id=&@+id/box2&&/&就如你看到的，属性layout_width&和&layout_margin是被显式的定义在每个View中。要为这个View创建一个新的样式，右键它并选择Refactor & Extract & Style。现在你会看到一个对话框，里面可以为样式设置名字，还可以选择要包含的属性。我们命名为MyBox，并选择除了background之外的所有属性。当你点击ok之后，你会看到第一个View的代码已经变了。&View&android:background=&#009688&
&&&&android:id=&@+id/box1&
&&&&style=&@style/MyBox&&/&这个View现在有了一个指向MyBox 样式的style属性。你可以打开res/values/styles.xml来查看这个样式的定义&style&name=&MyBox&&
&&&&&item&name=&android:layout_width&&100dp&/item&
&&&&&item&name=&android:layout_height&&100dp&/item&
&&&&&item&name=&android:layout_margin&&5dp&/item&
&/style&一旦一个样式被定义好，你就可以应用到任何View中。比如，把MyBox应用到第二个View：&View&android:background=&#00BCD4&
&&&&android:id=&@+id/box2&
&&&&style=&@style/MyBox&&/&应用了样式之后，activity中的两个View就是这个样子：2.&继承 StylesAndroid允许你在其他样式的基础上创建一个新样式。换句话说就是允许你继承style。继承一个style有两种不同的语法。第一种语法被称为隐式的语法，使用.号作为标记。比如，如果你要创建两个parent为MyBox，名为&TEAL和CYAN的子样式：&style&name=&MyBox.TEAL&&
&&&&&item&name=&android:background&&#009688&/item&
&style&name=&MyBox.CYAN&&
&&&&&item&name=&android:background&&#00BCD4&/item&
&/style&你也许能猜到MyBox.TEAL&和&MyBox.CYAN&都具有MyBox的所有属性，除此之外，它们还有android:background属性。第二种语法通常叫做显式的语法。它使用一个parent属性，其值就是parent style的名称。这里是一个定义名为TealBox的样式的代码片段：&style&name=&TealBox&&parent=&MyBox&&
&&&&&item&name=&android:background&&#009688&/item&
&/style&应用一个派生的style跟应用一个普通的没有区别。&View&android:id=&@+id/box1&
&&&&style=&@style/TealBox&&/&
&View&android:id=&@+id/box2&
&&&&style=&@style/MyBox.CYAN&&/&大多数开发者在继承自己的style时使用隐式的语法，而继承系统style时使用显式的语法。3.&创建Themes目前为止，我们只是把style应用到activity里面的View中。Android还允许你把style应用到整个activity和应用中。当一个样式被应用到activity或者application中时，就变成了一个一个theme（主题）。默认，使用最新版本Android Studio创建的所有的app都使用一个叫做AppTheme的主题。AppTheme是AppCompat的子类，一个非常大而广泛的主题，影响到几乎所有常用视图的外观。你可以在styles.xml中找到AppTheme的定义：&!--&Base&application&theme.&--&
&style&name=&AppTheme&&parent=&Theme.AppCompat.Light.DarkActionBar&&
&&&&&item&name=&colorPrimary&&@color/colorPrimary&/item&
&&&&&item&name=&colorPrimaryDark&&@color/colorPrimaryDark&/item&
&&&&&item&name=&colorAccent&&@color/colorAccent&/item&
&/style&AppTheme遵循Material Design.因此，为了创建符合的主题，使用AppTheme作为parent是一个不错的主题。要不然，你也可以直接使用Theme.AppCompat作为parent。虽然你可以书写XML代码来创建主题－记住，它们只是样式而已－但是在本教程，我将演示如何使用Android Studio的主题编辑器来做这些复杂的工作。要打开主题编辑器，打开Tools菜单选择Android & Theme Editor。在主题编辑器窗口的右边，你不仅有修改主题的控件，还有创建一个新主题的控件。左边展示主题修改后的预览结果。要创建一个新主题，点击Theme下拉菜单，选择Create New Theme选项。在弹出的对话框中，设置新主题的名称为MyTheme然后点击ok。到此时，&styles.xml将有一行新代码：&style&name=&MyTheme&&parent=&AppTheme&&/&让我们使用主题编辑器来修改MyTheme。为了让事情变的简单，本教程只修改colorPrimary,&colorPrimaryDark, 以及&colorAccent属性的值。要修改colorPrimary的值，点击colorPrimary按钮。主题编辑器将显示一个颜色对话框。选择你想要的颜色，但是记住给它一个新名字，如果你忘记了，主题编辑器将覆盖AppTheme的这个颜色。修改colorPrimaryDark和colorAccent的值是相同的步骤。主题编辑器将自动根据你选择的colorPrimary推荐合适的bothcolorPrimaryDark和colorAccent。现在MyTheme的定义看起来就是这样：&style&name=&MyTheme&&parent=&AppTheme&&&
&&&&&item&name=&colorPrimary&&@color/colorPrimaryMyTheme&/item&
&&&&&item&name=&colorPrimaryDark&&@color/colorPrimaryDarkMyTheme&/item&
&&&&&item&name=&colorAccent&&@color/colorAccentMyTheme&/item&
&/style&4.&应用Themes在应用我们创建的主题之前，让我们先添加几个常用的控件到activity中。这样更容易看到主题的效果。下面的代码创建了一个普通的Button，一个无边框的Button，一个彩色的Button，一个Checkbox，一个RadioButton，一个Switch，一个Seekbar，一个TextView以及一个EditText：&Button&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&normal&
&&&&android:id=&@+id/normal_button&&/&
&Button&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&borderless&
&&&&android:id=&@+id/borderless_button&
&&&&style=&@style/Widget.AppCompat.Button.Borderless&&/&
&Button&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&colored&
&&&&android:id=&@+id/colored_button&
&&&&style=&@style/Widget.AppCompat.Button.Colored&&/&
&CheckBox&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&New&CheckBox&
&&&&android:id=&@+id/checkBox&&/&
&RadioButton&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&New&RadioButton&
&&&&android:id=&@+id/radioButton&&/&
&Switch&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&New&Switch&
&&&&android:id=&@+id/switchButton&&/&
&SeekBar&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:id=&@+id/seekBar&&/&
&TextView&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:text=&New&Text&
&&&&android:id=&@+id/textView&&/&
&EditText&android:layout_width=&match_parent&
&&&&android:layout_height=&wrap_content&
&&&&android:id=&@+id/editText&
&&&&android:hint=&Input&&/&当添加了这些View之后，布局看起来就是这样的：如果你读过Material Design&spec。我确定你可以看出来此时的activity为colorPrimary&和&colorPrimaryDark使用了靛蓝色。而colorAccent使用的是粉色。这些都是Android Studio默认的颜色。你可以在项目的res/values/colors.xml中找到它们的hex值。要在activity中使用这个主题，打开项目的manifest文件，在定义activity的地方添加android:theme属性，把值设为@style/MyTheme。&activity&android:name=&.MainActivity&
&&&&android:theme=&@style/MyTheme&&
&&&&&intent-filter&
&&&&&&&&&action&android:name=&android.intent.action.MAIN&&/&
&&&&&&&&&category&android:name=&android.intent.category.LAUNCHER&&/&
&&&&&/intent-filter&
&/activity&同样，你还可以通过设置application的android:theme属性把这个主题应用到整个app。如果你现在看看你的activity，它应该有很大不同。总结在这个教程中，你学会了如何创建和应用自定义的样式和主题。你可以把这些知识用来让你的app变的更好看。不过别太离谱了－现在多数用户都已经习惯了&Material Design，偏离规则太远会干扰到他们。要学习更多关于样式和主题的知识，我建议你看一遍。
上一篇： 英文教程： Creating a Login Screen Using TextInputLayout 本教程中，我将再次讨论Material Design。 Google I/O 2015 对于每一个开发者来说都是一个重大的事件，设计当然也是谈资之一。 谷歌意识到向后兼容是实现material design的重要部分。当然supportl
下一篇： 动画可以增强产品的用户体验，也可以带来很多乐趣。今天我将演示如何为view和Activity添加左右滑动的动画。注：不是属性动画，而是安卓早期引入的补间动画，对于此处的应用场景来说足够了。 首先来看看我们将要创建的动画效果。Activity根据导航的方向滑入滑匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}