Day13开发——界面设计（登陆页）

了解和清楚原型以后我们就要开始界面设计的工作了，实际上，界面设计的工作和代码开发部分的工作可以同步进行，考虑到我们只有一个人在做这个东西，所以只能采用瀑布式的开发方式了。从上之下开始设计吧。
下面以土豆皮的登录页面设计作为案例进行详细解释

界面设计需要使用到的工具

1.原型或者线框图
参考分析需求使用

土豆皮原型.gif

2.adobe photoshop
制作界面使用

adobe photoshop

3.windows自带的计算器
计算像素尺寸使用

计算器.png

4.一套栅格系统
对齐排版使用

栅格系统

5.PS play
通过无线在手机上预览使用

PS play

6.斐波那契螺旋
确定黄金分割位置使用

FibonacciSpiral.jpg

7.原型展示图片
展示使用

原型展示图片.jpg

界面设计的过程是怎么样的

在开始动手制作界面的时候需要先根据原型确定需求。

土豆皮原型.gif

确定元素

界面当中包含元素有：
1.LOGO
2.一句衬托使用的话
3.三个社交登录按钮分别是，QQ,微信，新浪微博
4.背景

确定主题颜色

主题颜色我打算使用红色，因为todolist类型的软件，重点在于提醒重要的事项，所以在颜色的设计上希望使用比较强烈的颜色来刺激用户，让用户看到应用的时候会比较兴奋。但是为了保证视觉上的舒适性，红色的饱和度不可以过高。根据考虑和调整，所以希望采用#e84e40这个颜色作为主题颜色。

#e84e40

这个颜色是如何分析的？

有的时候真的是靠感觉，但是我经常会看一些设计规范，比如material design或者ios的设计规范，他使用的颜色都非常讲究，而且经过了长期应用的考验，所以可以直接在他们的色板里面找到自己希望使用的颜色。

色板

确定LOGO位置

首先通过斐波那契螺旋来确定LOGO的大体位置，使用这个几何图形的目的就是为了确定LOGO放在黄金分割的什么位置会比较合适。其实正常来说这一部分的工作叫做尺规作图，因为比较懒所以直接拿斐波那契螺旋来凑合了_@@

斐波那契.png

使用栅格系统进行微调

栅格系统微调

使用辅助线对细节进行微调

辅助线调整

最后在通过PS play将图样放在手机上，进行视觉观察和调整。因为在实际应用的过程当中仅仅通过数字几何来调整那么这个界面的设计是不完整的。因为图案之间的搭配还会受到视觉影响，会产生一些视觉上的欺骗的课程性，所以为了保证视觉上比较靠谱最后还要进行视觉调整。

确定字体大小及样式

LOGO的字体采用的是 Bauhaus 93 Reglar一般的艺术字体，主要是我懒得用钢笔工具去重新画。大小也是有讲究的。字体大小控制在了164px，线高大概有180.这样左右都可以空出两个栅格的距离保持视觉居中和平衡性。
其他的常用字体使用的是微软雅黑 light，字体细一点在强烈的颜色对比下看起来不会难受，可以产生一些呼吸感和清爽的感觉。居中对齐没什么好说的。一个界面当中最好只有一种对齐方式保持统一。