《十日談》第1天：需求分析、原型設計、UI設計

第1天：需求分析、原型設計、UI設計

1. 需求分析

大家好，我是 Soyeah （知乎 @獸爺 ），負責「十日」 APP 的設計工作，這一天的內容由我來給大家講解。由於這一章的內容是 UI 設計，不涉及開發部分，所以大家可以把它當做設計啟蒙了解即可。

為了教學目的，讓服務端實現儘可能全的資料庫操作，以及讓移動端實現可能多的RN組件，我們設計了「十日名片」這樣一款 APP，基本功能和系統的通訊錄差不多，但我們也要儘可能地追求美觀性和實用性。

?

和 Airing 商討之後，APP 可以分為以下兩個模塊：用戶模塊、名片模塊。用戶模塊管理用戶數據，包括用戶的註冊與登錄；名片模塊則是 APP 的核心模塊，包括名片的添加、列表展示、詳情展示等。

2. 原型設計

經過需求分析，十日名片App可以分為以下幾個page： 01登陸註冊頁／02個人名片編輯頁／03名片展示頁／04名片夾列表頁

原型設計使用了 Balsamiq Mockups3，最終確定的交互關係如圖所示。

十日名片是一個功能簡單單一的App，所以它的交互邏輯比較簡單。

交互流程：

需要注意的第一點：登錄註冊頁面基本上是每個 APP 都擁有的頁面。我希望十日名片可以是一個非本地單機版的移動名片夾，所以是需要註冊登錄使用的，可以統計用戶的數據以及分析他們的行為進行日後的優化。通過左右滑動用戶可以在同一個頁面進行登錄與註冊，減少用戶的注意力和疲勞值，讓用戶更加專註，體驗也比較友好。

需要注意的第二點：設計名片展示頁面時，我採用了卡片式的展示頁面，這樣簡潔而具有儀式感。

3. UI 設計

?

Sketch是一款輕量易用的適量設計工具。

磨刀不誤砍柴工夫不負有心人，首先，大家可以通過下載這個十分實用的工具，開啟你的UI設計之旅！

Sketch 官方下載地址：https://www.sketchapp.com/

Sketch 中文用戶手冊：http://www.sketchcn.com/sketch-chinese-user-manual.html

下載並且閱讀使用手冊之後把常用的插件也先下載了，你一定用得著！

Sketch 插件大合集：http://www.sketchcn.com/sketch-tips-tricks-1.html

很多剛接觸UI設計的小夥伴可能都和我一樣，對於界面是「個個心中有，人人下筆無。」在機不離手的時代，界面可以說是無處不在的，我們無時無刻都在接觸各種各樣的界面，但是當由自己一筆一畫拼湊一個出來時，界面早已不是一張簡簡單單的圖片罷了，可以說是融匯了圖形，文字，距離，交互，邏輯，心理的設計作品，是需要用心去對待的。

十日名片是我處女UI設計，當中難免有許多青澀和不成熟，希望大家見諒，也懇請大家對我提出批評指正。Day1的教程是我所掌握的一些關於UI設計的小技巧，在這裡分享給大家，希望可以互相交流，共同進步。

3.1 組件化設計

?

之前做一些練習作品時，遇到需要批量修改時還沒有這個概念，吃了不少苦，每一個都要重新手動調整，十分繁瑣。——親身體驗

動手之前首先需要了解一下組件化設計的概念，這樣做起來更加有條理性和邏輯性。界面可以理解成一個組裝機器人，是由很多組件組成的，我們要把每一個組件當作一個完成品去製作，最後無論是拼湊成型還是後期的部件修改，效果都是驚人地統一和便利的。

在sketch這個軟體中，有兩個工具是組件化必須會用到的。

1、CreateSymbol創建符號：一改全改，一變全變。

?

適用於固定公用組件：按鈕，列表，icon，導航等組件。

?

Sketch Symbol 的視頻教程@可樂橙_ColaChan：http://v.youku.com/v_show/id_XMjY0ODI2MDA0MA==.html

2、TextStyle文本共享：word格式刷??

給自己的App一套規範的文字格式語言，設計時會更加規範統一，後期交付開發也輕鬆。

3.2 移動設備尺寸

?

使用sketch自帶的最新尺寸准沒錯，我這次使用的是iphone7的解析度進行設計。現在，Sketch45.2的新建Artboard只有最新常用的設備尺寸了，後期適配使用插件也是如虎添翼的。

3.3 閱讀體驗

?

在偉大的設計師眼裡，文本不僅承載內容，而且可以構成界面。

文字是UI設計中占重要地位的元素，大部分App80%的構成由文字組成，所以文字的選擇和排版顯得十分重要。

文字的選擇：

1. App出現的文字最好不超過2種，我們可以通過更改同一種文字不同的字體形式區別開不同的功能。
2. 正文應選擇可讀性強的字體，十日名片App使用的是Mac自帶的PingFangSc字體。
3. 可讀性比較強的字體有：San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字體則有，華文細黑，思源黑體。

文字的排版：

1. 正文的字體建議在15-18pt，不應該小於11pt。
2. 當字體大小為12-18pt時，使用Regular，18-24pt時，使用Light，24-32pt,使用Thin，當字體大小超過32pt時，建議使用Ultralight。以上都是建議值，你應該根據不同字體的顯示效果進行設定使文字內容看上去清晰和精緻，從而保持良好閱讀體驗。
3. 字體大小和字元間距的關係如下圖

（圖片來源網路）

文字的顏色：

1. 一般正文字體不適用#000000純黑色字體。
2. 常用的色值我們會選擇#333333，#666666，#999999等深淺不同的黑色，通常會根據界面需要把字體顏色深淺分成3到5個層級，對應文字功能：一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字等。

字體與排版指南：http://www.uisdc.com/ui-design-font-typesetting

文字僅僅界面組件的一部分，每一個組件都應該有他的規範和體系。——沃茨基索得

最終要達到的目的便是規範。

網易雲音樂和LOFTER的規範文檔！@網易UEDC / 吳良：http://www.uigreat.com/article/208

3.4 切圖大法

?

1. 切圖先懂得命名

切圖命名規則：http://www.uisdc.com/slice-rename-in-ui-design

1. 哪一些需要切？怎麼切？

   作為開發者，這個問題容易解決，切自己所需要的即可。如果是設計師童鞋，則需要和開發者溝通確認。

3.5 十日 UI 展示

3.5.1 登錄註冊頁面

?

3.5.2 驗證碼頁面

?

3.5.3 名片詳情頁

?

3.5.4 名片列表頁

?

若還沒有添加過名片，顯示如下頁面：

?

3.5.5 名片編輯頁

?

最後，如果大家想從事 UI 設計的相關行業，建議大家多去 Dribble 上看看大師級的優秀作品，平時多注意收集靈感。

Airing 同時也是一個業餘的設計師，可以關注一下他的 Dribble：https://dribbble.com/airingursb

推薦閱讀：