Day13開發(fā)——界面設計（登陸頁）

了解和清楚原型以后我們就要開始界面設計的工作了，實際上，界面設計的工作和代碼開發(fā)部分的工作可以同步進行，考慮到我們只有一個人在做這個東西，所以只能采用瀑布式的開發(fā)方式了饵较。從上之下開始設計吧。
下面以土豆皮的登錄頁面設計作為案例進行詳細解釋

界面設計需要使用到的工具

1.原型或者線框圖
參考分析需求使用

土豆皮原型.gif

2.adobe photoshop
制作界面使用

adobe photoshop

3.windows自帶的計算器
計算像素尺寸使用

計算器.png

4.一套柵格系統(tǒng)
對齊排版使用

柵格系統(tǒng)

5.PS play
通過無線在手機上預覽使用

PS play

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

FibonacciSpiral.jpg

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

原型展示圖片.jpg

界面設計的過程是怎么樣的

在開始動手制作界面的時候需要先根據(jù)原型確定需求。

土豆皮原型.gif

確定元素

界面當中包含元素有：
1.LOGO
2.一句襯托使用的話
3.三個社交登錄按鈕分別是，QQ,微信峭火，新浪微博
4.背景

確定主題顏色

主題顏色我打算使用紅色毁习，因為todolist類型的軟件智嚷，重點在于提醒重要的事項，所以在顏色的設計上希望使用比較強烈的顏色來刺激用戶纺且，讓用戶看到應用的時候會比較興奮盏道。但是為了保證視覺上的舒適性，紅色的飽和度不可以過高载碌。根據(jù)考慮和調(diào)整猜嘱，所以希望采用#e84e40這個顏色作為主題顏色衅枫。

#e84e40

這個顏色是如何分析的？

有的時候真的是靠感覺朗伶，但是我經(jīng)常會看一些設計規(guī)范弦撩，比如material design或者ios的設計規(guī)范，他使用的顏色都非常講究论皆，而且經(jīng)過了長期應用的考驗益楼，所以可以直接在他們的色板里面找到自己希望使用的顏色。

色板

確定LOGO位置

首先通過斐波那契螺旋來確定LOGO的大體位置点晴，使用這個幾何圖形的目的就是為了確定LOGO放在黃金分割的什么位置會比較合適感凤。其實正常來說這一部分的工作叫做尺規(guī)作圖，因為比較懶所以直接拿斐波那契螺旋來湊合了_@@

斐波那契.png

使用柵格系統(tǒng)進行微調(diào)

柵格系統(tǒng)微調(diào)

使用輔助線對細節(jié)進行微調(diào)

輔助線調(diào)整

最后在通過PS play將圖樣放在手機上粒督，進行視覺觀察和調(diào)整陪竿。因為在實際應用的過程當中僅僅通過數(shù)字幾何來調(diào)整那么這個界面的設計是不完整的。因為圖案之間的搭配還會受到視覺影響屠橄，會產(chǎn)生一些視覺上的欺騙的課程性族跛，所以為了保證視覺上比較靠譜最后還要進行視覺調(diào)整。

確定字體大小及樣式

LOGO的字體采用的是 Bauhaus 93 Reglar一般的藝術字體仇矾，主要是我懶得用鋼筆工具去重新畫庸蔼。大小也是有講究的。字體大小控制在了164px贮匕，線高大概有180.這樣左右都可以空出兩個柵格的距離保持視覺居中和平衡性姐仅。
其他的常用字體使用的是微軟雅黑 light，字體細一點在強烈的顏色對比下看起來不會難受刻盐，可以產(chǎn)生一些呼吸感和清爽的感覺掏膏。居中對齊沒什么好說的。一個界面當中最好只有一種對齊方式保持統(tǒng)一敦锌。

字體

社交登錄按鈕的設計

社交登錄按鈕

社交登錄按鈕比logo要寬出來兩個柵格馒疹，用來和LOGO產(chǎn)生對比。

單個按鈕

單個按鈕采用了從做向右從上到下的規(guī)則進行排列乙墙，我的考慮是颖变，一般用戶肯定都有微信，所以這種放在最上面听想，另外也想通過社交登錄的模式篩選掉一部分用戶腥刹。畢竟軟件制作的再簡單也是有學習成本的。

間距

左面的小圖標和右邊的文字間距是間距60px汉买，以中縫線區(qū)分的話衔峰，兩邊彼此30px的等寬距離。小圖標大小是40px字體大小36px保證圖標和文字高度對齊看起來可以比較和諧。

效果圖

最后設計界面重要的是耐心垫卤，不斷的修復細節(jié)可以讓畫面變的更加精致威彰。每一個像素的改變都會產(chǎn)生意想不到的效果。一個元素擺放的位置都是有原因的穴肘。當然設計有一部分是只可意會不可言傳的歇盼，就需要我們自己慢慢去體會了。

效果圖