如何用編程思維快速完成產(chǎn)品設(shè)計？發(fā)布者：本站     時間：2020-06-20 15:06:58

依舊使用本地存儲照片，每次設(shè)計都重新制作每個組件時，我無法理解程序員只寫下三行代碼然后不斷使用真實數(shù)據(jù)衍生出其它模式的行為…

以下是我常用的設(shè)計工具：

Sketch：常用來制作線框、界面，偶爾繪制圖形。
Illustrator & Photoshop：用作圖標設(shè)計、圖形繪制、照片編輯等，但凡不適合用Sketch處理的都會考慮它倆。
Invision：用來制作簡單的線框原型。
Principle & After Effect：用來制作交互復(fù)雜的原型。（Principle仍在內(nèi)測，公開后你會得到更多關(guān)于這個工具的信息）
Zeplin：用以輔助設(shè)計師和前端開發(fā)的協(xié)同配合。
我認為Sketch與Zeplin之間依然有很大的空隙等待填補。

從創(chuàng)意到產(chǎn)品開發(fā)會經(jīng)歷數(shù)個階段，一旦概念設(shè)計和線框完成之后，就需要考慮視覺定義了。主要頁面的布局與視覺風格需要反復(fù)嘗試才能找出最適合目標用戶，并且能從競品中脫穎而出的一套。

我將之稱為創(chuàng)意階段。Sketch的故事板特別好用，你能快速的設(shè)計稿之間進行迭代，嘗試不同的圖形、按鈕、字體，放在一起依次查看。

直到進入下一步：產(chǎn)出階段。

之所以叫做產(chǎn)出階段是因為此時已完成了視覺定義，確定了字體、顏色、布局、形狀等元素，接下來就是產(chǎn)出數(shù)頁高精度視覺稿，即大家熟知的首頁、設(shè)置、好友列表、個人資料、關(guān)注、啟動頁等等。我習慣戴上耳機聽著音樂來搞定它們。

那么問題來了
從單一頁面開始完成所有的頁面設(shè)計，不僅花費了很多時間，而且極易消耗腦細胞。設(shè)計師青睞的Sketch對于這類批量產(chǎn)出類的工作無能為力。

更糟糕的是，有時即使尚未定義視覺語言，依舊需要設(shè)計這些頁面，在已有項目上設(shè)計新的功能，或是將當前項目交接給后續(xù)的設(shè)計師。

2015年，我依舊嘗試不同的工具組合并將其規(guī)則記錄下來。

編程思維
當被問到是否會寫代碼時，我回答：“不會，但略懂一些代碼原理。”

對我來說，弄明白我的設(shè)計如何以技術(shù)方式實現(xiàn)特別重要，因為它不僅讓我設(shè)計出比較可行的產(chǎn)品，也能提升創(chuàng)意能力。

我學會了Javascript的基礎(chǔ)和PHP/Mysql的邏輯，還會一點兒HTML/CSS。

我習慣頻繁的與開發(fā)團隊溝通，從而理解他們的工作內(nèi)容。我知道iPhone的應(yīng)用是由很多不同視圖組成，數(shù)據(jù)如何遷徙轉(zhuǎn)移，我該如何圖形化的表達它們。

這些讓我從圖形元素的結(jié)構(gòu)視角去看待一個產(chǎn)品，不是以代碼編輯器的模糊印象去揣摩實現(xiàn)方式，而是像一個超大謎題一樣抽絲剝繭的理解它們是如何構(gòu)建和相互影響的。

原子設(shè)計思維
一旦你以編程思維開始思考設(shè)計時，你開始剖析產(chǎn)品的每個圖形要素，這就是被稱作原子設(shè)計的思維。

簡單說，像字體、圖片、圖標或者按鈕等每一個物體都稱作原子。