design-work-flow-tools-1

云南体彩网:做設計的時間越久,就越意識一個好的、可執行性高的標準工作流真的能幫你節省非常多的時間,從繁瑣的日常設計中解放出來,能力成為真♂REAL 設計師。大熊自己總結了一套行之有效的方法,這里無保存分享給你。

每一個外省進城務工的設計師(們) 曾經都一直信奉這句箴言:

云南体彩网只要我切的圖夠快,寂寞就追不上我。

可是擺京不相信眼淚,不管你切@2x、@3x圖的手速有多快,如果核心產品邏輯沒理清,后期創意執行不到位,收尾細節考慮不周全,一樣在比稿(自查)時被K掉重做,到最后只能默默抽泣把妝哭花,浪費名貴時間。

做設計的時間越久,就越意識一個好的、可執行性高的標準工作流真的能幫你節省非常多的時間,從繁瑣的日常設計中解放出來,能力成為真♂REAL 設計師。大熊自己總結了一套行之有效的方法,這里無保存分享給你:

三大步調,絕大部分日常的設計需求,都可以用這套流程過一遍;至于無命題式的自由發明,則無需拘束在這幾個步調里面。工作流是拿來提高效率的,而不是限制想象力。

一、靈感和原型

云南体彩网除非是天賦迥異,否則誰也不克不及担保拿到創作命題就來靈感。因此,在工作生活中積累一個「靈感庫」非常重要。

人們在那里高談闊論著天氣和靈感之類的器械,而我卻象首飾匠打金鎖鏈那樣精心的勞動著,把一個個小環非常合適地連接起來。 ——海涅

這里安利一款叫Inboard的應用,你可以很方便的用它管理圖片素材,更棒的是只要在上面登陸你自己的Dribbble帳號,它會自動將你Like過的設計作品都同步下來,在本地也能輕松查看。

如果你早先用過Pixa或者Ember這樣的素材管理工具,上手是分分鐘的事情。

13zh20160410

云南体彩网「圖為 Inboard 2」

云南体彩网有經驗的設計師不會臨陣磨槍,那是剛入門的新手才犯的毛病。然而「太陽底下無新事」,讓我們看看2006年 NASA 再版的:

12zh20160410

云南体彩网「圖為 NASA 2006年上線的設計指南」

從字體規范到各個場景的應用(封面、網頁、小冊子、運輸工具的外觀、航天飛機的噴涂)全部囊括在內,且大部分內容都遵循2005年就已發布的版本做追加和修改。

云南体彩网10多年前的規范到如今都沒有什么大的變更,這意味著依照現有的人機交互范式,最常用的組件永遠都是那么幾樣(豈論 Mobile App還是 Web App)。

  • Navs
  • ButtonGroups
  • Pagination
  • Media
  • Form
  • ListGroups
  • ContentWrapper

這對你意味著什么?

云南体彩网意味著你并不需要一切「從頭來過」。

你所要設計的「新」器械, 其實前人在10多年前就設計過各種風格和交互樣式,而且還出過「規范」。所以,投入設計工作前,請務必做好這三件事:

  1. 前人是否做過類似的設計(豈論風格有沒有過時),檢查你的「靈感庫」并羅列出來;
  2. 刪去所有修飾元素,將內容重組,而且使其貼合你現有產品的設計風格,作為備選方案(是的沒有打錯,就是備選方案);
  3. 再想想其他的實現方案,可能只是一個微小的點,也足以讓你打破原有的設計思路。論證其可行性并完善,作為主方案。

大熊在今日頭條工作時,勇哥(前財新產品設計主管)常提起他和胡舒立共事的細節,印象很深的一點是他說,當你想到一個絕妙的設計點子時,不要急著出方案,而是將它小心翼翼的放在心里,作為備選方案,然后再想下一個。

云南体彩网這是因為,設計永遠有更精妙的,而你要確保你每一次的設計,從視覺風格到交互體驗,都在你的水準線以上。所以無論何時,都要留個備選方案,哪怕出不了彩,也能担保設計質量。(雖然備選方案最后經常被棄用)

此外,Pinterest,Pttrns,Reeoo等都是靈感扎堆的地方,特別是跨界設計往往容易把思路打開,做GUI設計紛歧定只看界面設計,有時候一副攝影作品(Unsplash有多好用我就不多說了)都能給你帶來無限靈感,好比:

11zh20160410

云南体彩网「圖為 haobtc landingpage 頭圖的靈感來源」

云南体彩网最方便的原型工具依然是你身邊的紙筆。

大熊在用的是Moleskine和Evernote的合作款,偶爾發生的新想法、草圖都可以記錄在內,而且同步到 Evernote,非常方便。

Processed with VSCOcam with b4 preset

云南体彩网「圖為 haobtc 開發中的公告系統界面手稿」

提到原型工具,去年是它們爆發的一年,今年目測依然會繼續。

Origami、Pixate、Framer.js、Form、Invision、Principle、Marvel云南体彩网各有各的著重點(Pixate 與 Form 都已被 Google 收購),如果你是JavaScript好手,毫無疑問Framer.js是最合適的工具,代碼級細粒度的調試能担保最后的效果和設計原型別無二致。

而如果產品中使用了 Pop Animation(Facebook 開源) 這樣的動畫框架,那么 Origami 當之無愧是最佳選擇。

然而除卻上面這些,不得不提的卻是 Keynote云南体彩网,因為出身之初 Keynote 就使用了OS X 內置的 Quartz 圖形技術,拿它做動態交互居然出人意表的流暢,這也難怪有這么多設計師偶爾也拿它做原型動畫,Apple WWDC 2014 甚至專門演示了的過程。

7b2efba873ff9058bc935eceb492f48b_r

云南体彩网「圖為大熊早期練習 keynote 時制作的動效,學習門檻非常低」

不過,最讓大熊期待的還是 Silver Flows (已被 Invision 收購,并入Craft 2.0套件),直接在 Sketch中完成頁面之間的鏈接跳轉,原生的轉場動畫,可實時編輯的輸入框,還有嵌入 Webview,這些都在手機上實時預覽,簡直亦可賽艇。

希望早日推出正式版本,比Adobe XD云南体彩网用起來效率高應該是肯定的。

二、設計與改進

有了原型(不管是畫在紙上的還是用Axure云南体彩网這樣的工具輸出)后就進入真正的設計階段,這時就要細細考量:

  • 字體
  • 字符間距
  • 用色規范
  • 組件的擺放對比
  • 多屏的適配
  • 動效

至于 GUI 界面設計的利器,當然要提 Sketch。它幾乎成了現在設計師的標配,一方面門檻很低、體積輕巧,相比Adobe家族的一票設計軟件,上手要容易的多;另一方面軟件的種種特性都為Web和App設計量身定做,輸出CSS、模塊化的設計組件、都讓設計和后期開發減去許多溝通成本。

然而,設計并不克不及拘泥于工具。絕沒有「用 Sketch 就比用 PS 的技高一籌」的說法,說出這種話的設計師,其自身能力往往也很一般。

云南体彩网工具沒有最完美,只有最合適。

Sketch 在互聯網設計圈流行開以后,經歷了很長時間的停滯期(3.X 版本),由于遲遲沒有新的 feature 跟進,受到很多人的埋怨,大熊也是其中一員。后來發現一家叫 Serif 的英國工作室推出了 Affinity Photo 和 Affinity Designer云南体彩网 兩款設計套件,極快的響應速度和高兼容性馬上就吸引了很多設計師的目光。人人迅速轉移陣地,這兩款設計軟件也流行開來,還斬獲了Apple Design Award 和 2015 年度 Mac App。

云南体彩网在這之后 Sketch 也隨即開始了一系列的版本更新,修復了許多舊 Bug,看的出 Bohemian 團隊充斥危機意識。

設計工具的選擇已經上升到黨派戰爭,完全可以另起一篇好好討論,這里篇幅有限,不再展開。

云南体彩网接著要說說初步設計完成后,如何改進的問題。

云南体彩网一稿過就跟 One take 一樣,偶爾會發生,從未尋常過。

–大熊

設計幾乎一定是要改的,既然做了設計師,就要做好心理準備。大熊以前很抗拒改稿,辛辛苦苦做的設計說改就改,那么多晚都白熬了,心里肯定不爽。

然則后來卻意識到,改才是常態,好設計真的(幾乎)都是改出來的。好比今日頭條內部創業做了一款產品叫時光相冊,非常好的產品,初期設定界面時,大熊單單就相冊的展示頁做了16種分歧的版式,最終和產品負責人從中挑選了最合適的展示方式:

8zh20160410

「圖為部分時光相冊早期界面樣式探索。 」

云南体彩网只有比較的過程中,你才更容易發現原來設計中不合理的地方,逐一剔除刪改,最后留下來的一定是經過多層考慮最合適的設計。

這款產品現在早已和我沒有關系,但其時沈振宇提到的一個觀點,我一直都非常認同:設計師們對美的器械有天然的偏好,所以你看他們的設計稿,一張張都無比美幻。而實際上, 產品的內容是用戶發明的,用戶不是藝術家,他們的相冊里放的都是日常的瑣碎,試想拿這樣的照片替換設計稿中的占位圖,設計還有原先那么美嗎?

回過頭去看 dribbble云南体彩网 上的首推設計作品,無一不講究氛圍,基調的拿捏。放在那個場景里是無可挑剔的,但落到實際的產品上,卻不太經得起推敲。

有一位叫 Tobias 的設計師在 Medium發表了類似的文章,觀點之一就是 dribbble 上的作品從未真正的「解決」過問題,值得一讀。

譯文版本:《設計追波風!值得每個設計師閱讀思考的深度剖析文》

云南体彩网此外,改進要盡可能面面俱到,不起眼的小改動,卻往往能讓整個界面變得紛歧樣。

好比一個創業朋友正在開發他們的 App,心急火燎的找大熊改進界面的設計,其中一個界面改版是這樣的:

7zh20160410

「左側為改版前,右側為大熊改版后」

看起來變更很大,實際上只作幾處改動:

  • 調劑了字重、巨細和間距;
  • 強化原來的卡片設計的層級;
  • 強化了主色和輔助色;
  • 調劑了組件的擺放位置;

自己做的設計也一樣,多次改動后可能面目全非,跟第一版差距很大。有心里落差很正常,但只要最后的結果是變好的,那么這樣的改動就很值得。(不過也要記得做好備份,改完10版最后用回第一版是高頻事件)

云南体彩网另外順便提一下 ,這哥們從2001年開始十多年筆耕不輟,職業生涯一直都游走在用研和人機交互間,產出了很多高質量的文章。國內許多設計團隊在做設計決策時,都直接或間接參考過他提供的數據和結論,在交互設計界影響力可見一斑。

如果說 LittleBigDetails 是收集「讓人會心一笑的設計細節」,那么 Luke 對于設計的觀察就是回歸理性,一切用數據說話。

6zh20160410

「圖為Apple Watch 推出時,Luke發表的一篇關于用戶使用電子設備習慣的一篇文章」

三、交付與實現

云南体彩网任何事都沒有外面看起來那么簡單。 ——墨菲定律

云南体彩网如果是你沒有接觸過的開發領域,好比 iOS 應用的開發,必須要學習 Obj-C 或 Swift 語言,那么通常來說,將標注的清清楚楚,完完整整的設計指南(Design Guide)、素材(Assets)和交互流程 交付給研發工程師,任務到這里就可以告一段落了。

在沒有神器 Zeplin 之前,大熊通過 Sketch Measure云南体彩网 這款插件來標注設計圖。

云南体彩网每張視覺稿都對應3張頁面,兩張頁面分別解釋橫向結構和縱向結構,一張頁面解釋視覺樣式,包含字體、字號、行高,字間距等等。即便有插件的贊助,可標注依然只能手動。

所以設計師最痛苦的事情就是設計過稿了以后,桌面放上一壺水,眼睛瞇成一條縫,連續標上兩三天(如果有幾十個頁面,這是再正常不過了)。

5zh20160410

云南体彩网「圖為 haobtc 內部項目原設計」

重復的勞動應該讓機器來做,所以我們有了 Zeplin,由以色列 Startupbootcamp 和 YC 孵化出來的一個項目,徹底解放了設計師的雙手。不只解決了所有標注的問題,真正做到WYSIWYG,還生成了Guidline,自動整理了設計中所用到的字體(Fontbook)和顏色(Color Palette)。

美中不足的是,在我們實際使用過程中,發現Zeplin 不克不及準確的識別元素的邊距,經常有0.1-0.5pt 的誤差,值得慶幸的是 Zeplin正在努力解決這個問題,相信后續的版本會獲得修正。總的來說,使用 Zeplin能節約團隊的開發時間,沒有理由不推薦。

4zh20160410

「圖為 Zeplin 操作面板」

3zh20160410

云南体彩网「圖為 Zeplin 設計指南」

對于你不甚了解的領域,好比從未寫過一行 Obj-C 的代碼。能盡可能做到担保設計組件結構清晰,同時站在工程師和產品經理的角度思考問題,那么作為一個設計師,到這里交付給研發工程師是可以理解的。

但如果你同時也略為熟悉這個領域,好比 Web 端的開發,HTML 和 CSS 都寫的簡煉干脆,那么最好將完整的頁面(以合理的 Dom 結構和語言標簽)一并寫好并交付給研發工程師。為什么設計師最好要寫代碼?原因非常簡單:

  1. 讓研發工程師調試界面是非常痛苦的事情,他們對這件事并沒有好感;
  2. 人力資源有限的情況下,研發工程師(通常)會將絕大部分精力花在業務邏輯代碼等事情上,以實現資源的最優配置,界面依照設計還原的優先級是滯后的,除非強制要求。
  3. 大部分人對設計的感知停留在「感覺這個比那個看起來舒服,但說不出來為什么」,也只有設計師把情愿把時間花在無窮無盡的像素級對比和排版上,并以此為樂。

這樣一來雙方都開心,效率也提高了。

但是,大熊并不鼓吹現在流行的 Full Stack Designer (這里特指在設計的同時,分配很多精力在業務邏輯的代碼上)這種說法,這樣往往兩者都做欠好。早期之所以有 Web Master(包含建站、數據庫、后臺、前端界面、設計,都一手經辦的人),是因為在其時的環境下,Web 開發遠沒有像今天這么復雜:

2zh20160410

「圖為Apple 20年前的官網。 」

在那個時期,許多網站都像是簡單的(以及符合其時審美)圖文編排的 Blog,附上一堆超鏈接,并沒有如今這么復雜的后臺業務邏輯和網絡環境。

云南体彩网但如今再去言必提及 Full Stack,實在是有點不客觀。比起前者,Multi Stack 這個詞更符合現在的實際情況。

設計領域已經非常細分了:界面設計、人機交互、三維骨骼、原畫、場景、粒子特效、HUD設計、動作鏡頭(有興趣可以去看@光學核心 個人制作的,頂級的分鏡水準,無可挑剔的節奏感和襲擊感,中間花了多少時間反復琢磨和練習恐怕無人能知。)

云南体彩网每一項都必須花上可怕的時間能力達到單個領域里專家的水準,所以當有設計師遑論樣樣精通時,實際上是樣樣稀松,單個拎出,都上不了臺面。

正因如此,對自己不熟知的專業領域要尊重,能力有好的心態去學習和進步,先有一技之長,能力多處開花。

云南体彩网最后再安利 這款工具來提高你的效率,這簡直又是一枚神器。

云南体彩网Auto Reload(類似Hot-Reload)、Html Includes、Clever path,支持SCSS/SASS…毫不夸張的說,它贊助大熊節約了至少20%寫頁面花費的工作時間。當然,也有一些其他的工具,好比 也能做類似的事情,最好根據自身的需求去選擇。

1zh20160410

云南体彩网「圖為 Hammer 的界面。 」

云南体彩网最后,希望人人都能找到設計的樂趣,做出好玩有意義的器械出來,堅持學習的激情。

大熊的 dribbble:?? Github:

歡迎關注大熊的微信公眾號:大熊撥清波。

dxqr160411_

【優設精品職場經驗合集】

總監過來人的經驗分享
《總監必備技!聊聊如何做好設計師管理?》

如何管理兩種分歧類型的設計師?
《總監修煉之路!如何管理才干型/實干型的設計師?》

人氣超旺的職場真相揭秘!
《這才是真相!為什么中國的甲方都不肯意為設計付出高額費用?》

yestone-uisdc-2

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量112萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

點贊
收藏 1
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏