了解和清楚原型以后我们就要开始界面设计的工作了，实际上，界面设计的工作和代码开发部分的工作可以同步进行，考虑到我们只有一个人在做这个东西，所以只能采用瀑布式的开发方式了。从上之下开始设计吧。
下面以土豆皮的登录页面设计作为案例进行详细解释
界面设计需要使用到的工具
1.原型或者线框图
参考分析需求使用
2.adobe photoshop
制作界面使用
3.windows自带的计算器
计算像素尺寸使用
4.一套栅格系统
对齐排版使用
5.PS play
通过无线在手机上预览使用
6.斐波那契螺旋
确定黄金分割位置使用
7.原型展示图片
展示使用
界面设计的过程是怎么样的
在开始动手制作界面的时候需要先根据原型确定需求。确定元素
界面当中包含元素有：
1.LOGO
2.一句衬托使用的话
3.三个社交登录按钮分别是，QQ,微信，新浪微博
4.背景
确定主题颜色
主题颜色我打算使用红色，因为todolist类型的软件，重点在于提醒重要的事项，所以在颜色的设计上希望使用比较强烈的颜色来刺激用户，让用户看到应用的时候会比较兴奋。但是为了保证视觉上的舒适性，红色的饱和度不可以过高。根据考虑和调整，所以希望采用#e84e40这个颜色作为主题颜色。
这个颜色是如何分析的？
有的时候真的是靠感觉，但是我经常会看一些设计规范，比如material design或者ios的设计规范，他使用的颜色都非常讲究，而且经过了长期应用的考验，所以可以直接在他们的色板里面找到自己希望使用的颜色。
确定LOGO位置
首先通过斐波那契螺旋来确定LOGO的大体位置，使用这个几何图形的目的就是为了确定LOGO放在黄金分割的什么位置会比较合适。其实正常来说这一部分的工作叫做尺规作图，因为比较懒所以直接拿斐波那契螺旋来凑合了@@
使用栅格系统进行微调
使用辅助线对细节进行微调
最后在通过PS play将图样放在手机上，进行视觉观察和调整。因为在实际应用的过程当中仅仅通过数字几何来调整那么这个界面的设计是不完整的。因为图案之间的搭配还会受到视觉影响，会产生一些视觉上的欺骗的课程性，所以为了保证视觉上比较靠谱最后还要进行视觉调整。
确定字体大小及样式
LOGO的字体采用的是 Bauhaus 93 Reglar一般的艺术字体，主要是我懒得用钢笔工具去重新画。大小也是有讲究的。字体大小控制在了164px，线高大概有180.这样左右都可以空出两个栅格的距离保持视觉居中和平衡性。
其他的常用字体使用的是微软雅黑 light，字体细一点在强烈的颜色对比下看起来不会难受，可以产生一些呼吸感和清爽的感觉。居中对齐没什么好说的。一个界面当中最好只有一种对齐方式保持统一。
社交登录按钮的设计
社交登录按钮比logo要宽出来两个栅格，用来和LOGO产生对比。
单个按钮采用了从做向右从上到下的规则进行排列，我的考虑是，一般用户肯定都有微信，所以这种放在最上面，另外也想通过社交登录的模式筛选掉一部分用户。毕竟软件制作的再简单也是有学习成本的。
左面的小图标和右边的文字间距是间距60px，以中缝线区分的话，两边彼此30px的等宽距离。小图标大小是40px字体大小36px保证图标和文字高度对齐看起来可以比较和谐。
效果图
最后设计界面重要的是耐心，不断的修复细节可以让画面变的更加精致。每一个像素的改变都会产生意想不到的效果。一个元素摆放的位置都是有原因的。当然设计有一部分是只可意会不可言传的，就需要我们自己慢慢去体会了。
