手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

設(shè)計師對可擴展設(shè)計工具的探索

2015-10-22    用心設(shè)計

藍藍設(shè)計m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

來源:莫貝網(wǎng)

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

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

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

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

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

我認為Sketch與Zeplin之間依然有很大的空隙等待填補。

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

我將之稱為創(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è)計的思維。

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

1

然后原子們可以組成分子,正如細胞(列表條目)一般。

2

一堆細胞變成一個組織,即列表。

3

如此反復。

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

我喜歡以樂高積木的方式來暢想設(shè)計(我朋友形容設(shè)計學校就像幼兒園一樣,無非是講設(shè)計原子按照積木一樣拼來拼去…)。

但是我需要將該流程直接適配到一個視覺設(shè)計工具中去,用來為我的設(shè)計工作增強一致性和效率。

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

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

Matej Hrescak開發(fā)了一個Sketch插件能夠快速進行組件設(shè)計,對我來說僅僅起了個好頭,我希望將其繼續(xù)升級。

工作原理

一旦視覺語言確認,你可以據(jù)此制作一個單獨文檔來搞定規(guī)范,并且移除軟件其它的無用信息。

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

4

第二步,開始設(shè)定更精細的原子:標題、文本字體、按鈕和輸入框。

5

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

6

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

78

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

我們還可以設(shè)置更復雜的組織(例如導航欄)來保持各處的一致性。

910

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

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

從事移動設(shè)計3年之后,我依然能夠清晰的記得導航欄的高度是多少。

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

目前Sketch已經(jīng)能夠通過文字樣式和制作符號(symbol),Photoshop通過智能對象來完成這些工作,但還遠遠不夠,你們覺得呢?

你們的想法是什么?

原文地址: medium
譯文來自:aliued

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔