寫給 Web 工程師的設計入門

今天分享一篇 設計過程 的入門~ 其中也包含一些有用的 設計網站。若是你你想知道如何完整設計一個項目，能夠一塊兒來看下~

在本文中，將以設計一個 CMS 系統界面爲例，介紹針對 web 開發中的通用設計流程。

CMS，全稱 Content Management System，即內容管理系統

搭建環境

原文做者使用的是 Adobe XD（它是徹底免費的）中的 Web 選項：

若是你使用 Sketch，Photoshop 或者其餘軟件，記得選擇 文檔尺寸 爲 1920x1080，這是 web 項目的標準分辨率。

面向客戶

若是你有機會跟客戶直接交流，最重要的就是 確認客戶到底想要什麼。

假設本文設計的項目基於如下背景：

咱們的客戶，Pablito，擁有一個麪包房，他想要一個 CMS 系統用來展現麪包的圖片和視頻，而且系統裏能夠新增和編輯文章，並且這些文章能夠從 CMS 中發佈到 Twitter 和 Facebook。

那麼讓咱們來列舉一下這個項目的功能：

系統中的內容都有什麼？

• 圖片
• 視頻
• 文章

系統的功能都有什麼？

• 登陸；退出。
• 上傳圖片；刪除圖片；分享圖片到社交媒體。
• 上傳視頻；刪除視頻；分享視頻到社交媒體。
• 建立文章；編輯文章；發佈文章到外部博客。

好！下一步：調查。

不要重複造輪子

不少同窗在作設計的時候喜歡從零開始，這怎麼可能？ 設計不是魔法，互聯網上 全部的東西 都是設計出來的，均可以參考！

在這個例子中咱們要設計一個 CMS，因此須要一些靈感。你能夠在如下網站找到：

Pinterest

Bëhance

搜索能力

不要跳過這個步驟。只須要在 Google 中搜索 CMS，而後依次點進去，你可能會看到不少網站是用 Wordpress，Wix , Joomla 或者 Drupal 作的。能夠體驗一下這些 CMS，看看人家是怎麼設計的。

草圖

是時候拿起 紙和筆 開始畫出你的想法了。個人建議是用一個 小點兒的筆記本，這對於表達簡單的想法頗有幫助，由於你沒必要關心大片空白的區域。

下面給你看下我畫的草圖：

登陸界面：

主界面：

圖片展現界面：

分享模態框：

文章編輯界面：

側邊欄：

若是你想向客戶展現草圖，以便確認他們的想法，那麼就去作吧！

設計，可是用灰色

咱們尚未說到顏色的部分，暫且把它放在設計完成以後。

是時候將咱們的草圖數字化了。選一個軟件而後開始吧~ 咱們將會遵循幾個簡單的設計指南，若是你想要深刻了解 如何作具備可用性和可訪問性的設計，能夠參考文末的文章。

那麼爲啥用灰度設計？由於這樣咱們就能夠 專一於內容以及元素擺放的方式和位置。

第一步：網格

咱們不會深刻講 網格。它們對於設計中定位和放置元素頗有用，你能夠根據須要建立。下面是基本的例子：

建立網格的步驟是這樣的：在文檔的 正中間建立一條簡單的線。而後在右側複製粘貼它。你能夠按本身的想法控制線條間的距離。

而後只須要複製粘貼到另外一側使其對稱便可。

第二步：擺放元素

爲了簡單起見，我只展現部分繪製的頁面：

主界面：

圖片展現界面：

分享模態框：

能夠看到，我只用了灰色調。也沒有用黑色，由於若是要突出某個顏色，可使用不一樣類型的灰色。

終於，該上色了

好了，是時候爲咱們的設計着色了。

咱們不會深刻了解調色板和顏色的理論。你只須要記住：理想的調色板包括：一個主要顏色，一個次要顏色和一個高亮顏色。若是你的客戶有 logo 或者商標，調色板中也應該體現其中的顏色。

假設咱們的客戶 Pablito 不介意使用的顏色。若是你不想在建立調色板上花費時間，能夠看文末的第二個連接，找到一個本身喜歡而且反映了業務本質的調色板。

我選擇了下面這個色板，並用它來做爲示例：

下面是應用後的效果：

主界面：

登陸界面：

圖片展現界面：

上面全部的圖標，都是在 Adobe XD 中完成的。固然你也可使用外部圖標庫。圖片也能夠在 Unsplash 上找。

就是這樣！

讓咱們總結一下上面的流程：

1. 搭建環境。
2. 肯定 項目的 內容和須要的功能。
3. 挖掘一下 現成的例子，尋找一些 靈感和能力。
4. 在一個小本子上用紙和筆畫出 草圖。
5. 用一個簡單的 網格 以 灰度等級 將這些草圖數字化。
6. 建立一個 調色板。
7. 爲數字草圖 上色，進行最後的 裝飾和修復。

總結

設計是一個複雜的過程，可是在進行元素擺放和着色以前先弄清楚幾個步驟，會讓整個流程更 簡單和快捷。

若是你連要設計的內容都不清楚，那你還怎麼設計它呢？難道從猜想開始？或者說，若是你連項目具備哪些功能都不瞭解，又怎麼開始畫草圖呢？

個人最後的也很重要的建議是：設計與 外觀 無關，設計是用來展示 信息 的。你所設計的 全部內容 都與 信息 有關，沒有信息，你的設計就只剩下...

...好看的顏色和各類形狀。

全文完！但願對你瞭解設計有所幫助~

相關連接

• Why usability and accessibility matters in Design: 5 tips
• 調色板 ColorHunt
• Unsplash
• About Grids
• About Typography

---

本文首發於公衆號：碼力全開（codingonfire）

本文隨意轉載哈，註明原文連接便可，公號文章轉載聯繫我開白名單就好~