如何用編程思維快速完成產(chǎn)品設(shè)計(jì)？

舒舟（阿里巴巴1688事業(yè)部）：人們普遍認(rèn)為，流程和工具不重要，重要的是想法和思路。話雖如此，不過(guò)我認(rèn)為流程和工具也能反映一個(gè)設(shè)計(jì)師的設(shè)計(jì) 態(tài)度以及個(gè)人思維方式。那些愿意折騰愿意改變的設(shè)計(jì)師，在接受新的設(shè)計(jì)思想和趨勢(shì)時(shí)往往更容易適應(yīng)。本文作者Benjamin Berger是一名來(lái)自法國(guó)的交互設(shè)計(jì)師，文中他介紹了常用的設(shè)計(jì)工具并找出了這些工具協(xié)同時(shí)的弊端，提出了自己基于原子設(shè)計(jì)思維之上的進(jìn)一步想法，你愿意和他一起探討嗎？

要是我們把2015年叫做設(shè)計(jì)工具井噴之年，應(yīng)該不會(huì)有多大異議吧。

數(shù)據(jù)證明，目前大約34.7%（超過(guò)三分之一）的Medium文章與設(shè)計(jì)工具有關(guān)。但人們?nèi)匀涣?xí)慣使用靜態(tài)圖形工具來(lái)制作界面。當(dāng)依舊使用本地存儲(chǔ)照片，每次設(shè)計(jì)都重新制作每個(gè)組件時(shí)，我無(wú)法理解程序員只寫下三行代碼然后不斷使用真實(shí)數(shù)據(jù)衍生出其它模式的行為…

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

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

我認(rèn)為Sketch與Zeplin之間依然有很大的空隙等待填補(bǔ)。

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

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

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

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

那么問(wèn)題來(lái)了

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

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

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

編程思維

當(dāng)被問(wèn)到是否會(huì)寫代碼時(shí)，我回答：“不會(huì)，但略懂一些代碼原理?！?/p>

對(duì)我來(lái)說(shuō)，弄明白我的設(shè)計(jì)如何以技術(shù)方式實(shí)現(xiàn)特別重要，因?yàn)樗粌H讓我設(shè)計(jì)出比較可行的產(chǎn)品，也能提升創(chuàng)意能力。

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

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

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

原子設(shè)計(jì)思維

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

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

然后原子們可以組成分子，正如細(xì)胞（列表?xiàng)l目）一般。

一堆細(xì)胞變成一個(gè)組織，即列表。

如此反復(fù)。

在我們公司，前端開(kāi)發(fā)通常制定一套全景規(guī)范用以描述產(chǎn)品的各個(gè)設(shè)計(jì)原子，分子和組織。

我喜歡以樂(lè)高積木的方式來(lái)暢想設(shè)計(jì)（我朋友形容設(shè)計(jì)學(xué)校就像幼兒園一樣，無(wú)非是講設(shè)計(jì)原子按照積木一樣拼來(lái)拼去…）。

但是我需要將該流程直接適配到一個(gè)視覺(jué)設(shè)計(jì)工具中去，用來(lái)為我的設(shè)計(jì)工作增強(qiáng)一致性和效率。

假如能夠在一個(gè)面板或者在故事板中設(shè)計(jì)所有的設(shè)計(jì)原子，不用操心對(duì)齊、字體、顏色等，它們會(huì)自動(dòng)處理好。

想象如果能夠不斷的將原子設(shè)計(jì)規(guī)范傳到下游設(shè)計(jì)公司那該多美。

Matej Hrescak開(kāi)發(fā)了一個(gè)Sketch插件能夠快速進(jìn)行組件設(shè)計(jì)，對(duì)我來(lái)說(shuō)僅僅起了個(gè)好頭，我希望將其繼續(xù)升級(jí)。

工作原理

一旦視覺(jué)語(yǔ)言確認(rèn)，你可以據(jù)此制作一個(gè)單獨(dú)文檔來(lái)搞定規(guī)范，并且移除軟件其它的無(wú)用信息。

第一步，設(shè)定顏色、主字體、圖形、邊距、留白。

第二步，開(kāi)始設(shè)定更精細(xì)的原子：標(biāo)題、文本字體、按鈕和輸入框。

最后，在故事板中制作基本的文本和圖層：

然后通過(guò)右鍵給它們賦予預(yù)設(shè)的樣式。

矩形會(huì)自動(dòng)嵌套預(yù)設(shè)的風(fēng)格樣式，正如你手動(dòng)編輯過(guò)該標(biāo)簽一樣。通過(guò)設(shè)置邊距，按鈕會(huì)根據(jù)標(biāo)簽文本的長(zhǎng)度自動(dòng)適應(yīng)，通過(guò)留白設(shè)置可以將故事板內(nèi)部元素自動(dòng)對(duì)齊。

我們還可以設(shè)置更復(fù)雜的組織（例如導(dǎo)航欄）來(lái)保持各處的一致性。

在此基礎(chǔ)上可以添加更多功能，使得通過(guò)設(shè)置每個(gè)元素來(lái)自動(dòng)生成頁(yè)面、列表、卡片成為可能。改動(dòng)設(shè)計(jì)設(shè)定會(huì)自動(dòng)應(yīng)用到所有元素上。這樣能夠很方便的測(cè)試不同的顏色、字體風(fēng)格等等的效果。

制作界面模板套件將不費(fèi)吹灰之力，通過(guò)預(yù)設(shè)原生組件就能實(shí)現(xiàn)。

從事移動(dòng)設(shè)計(jì)3年之后，我依然能夠清晰的記得導(dǎo)航欄的精確高度是多少。

當(dāng)然，設(shè)定部分元素時(shí)，我們也可以為顏色、字體對(duì)比、快速制作響應(yīng)式元素、調(diào)色板等及時(shí)的提供一些可用性提示，而不用擔(dān)心過(guò)多細(xì)節(jié)。

目前Sketch已經(jīng)能夠通過(guò)文字樣式和制作符號(hào)（symbol），Photoshop通過(guò)智能對(duì)象來(lái)完成這些工作，但還遠(yuǎn)遠(yuǎn)不夠，你們覺(jué)得呢？

分享名稱：如何用編程思維快速完成產(chǎn)品設(shè)計(jì)？
標(biāo)題鏈接：http://www.bm7419.com/news3/164453.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、響應(yīng)式網(wǎng)站、App開(kāi)發(fā)、自適應(yīng)網(wǎng)站、軟件開(kāi)發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)