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

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

以下是我常用的設計工具：

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

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

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

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

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

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

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

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

編程思維
當被問(wèn)到是否會(huì )寫(xiě)代碼時(shí)，我回答：“不會(huì )，但略懂一些代碼原理?！?br />
對我來(lái)說(shuō)，弄明白我的設計如何以技術(shù)方式實(shí)現特別重要，因為它不僅讓我設計出比較可行的產(chǎn)品，也能提升創(chuàng )意能力。

我學(xué)會(huì )了Javascript的基礎和PHP/Mysql的邏輯，還會(huì )一點(diǎn)兒HTML/CSS。

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

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

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

簡(jiǎn)單說(shuō)，像字體、圖片、圖標或者按鈕等每一個(gè)物體都稱(chēng)作原子。