高效流程!手把手教你用Sketch建立一個新的App項目 - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

高效流程!手把手教你用Sketch建立一個新的App項目

2017/04/12 27317評論區

如何從零開始高效建立一個App 設計項目?今天這篇好文總結了一套高效的工作流程,教你如何把項目拆分成可執行的方案,實例演示,建議收藏。

建立一個新的設計項目真的很難。無論你是一個自由職業設計師,還是在很火爆的產品機構工作,又或者為大型設計團隊提供服務……從頭開始都是令人生畏的。必須得有自己的一套思路來解決問題,提供視覺,並且漂亮平順的將其轉變為產品設計。

我覺得我現在已經非常高效,其它設計師或許能從我的這套方法中得到啟發。

注︰我並不是向你展示如何做一道菜。 黿鍪竊趺辭脅耍ㄈ綰偉嚴金坎鴟鄭┤緩蟀遜諾焦 /p>

目錄︰

1. 創建文件夾(廢話,這是必須的)

2. 選擇顏色

3. 選擇字體

4. 確認網格

5. 建立一個框架

6. 轉變成高保真原型

1. 創建文件夾

理由︰使所有的設計文件歸類齊整

工具︰Finder(mac系統自帶的文件管理)

千里之行始于足下。我的文件夾結構讓我更有條理,同時也是一個非︰玫姆絞椒窒砩杓譜試錘煌 慕巧,比如市場、開發等。

我選擇添加下劃線來確保這些文件夾排在列表的前面

  • _assets(素材): 這個文件夾用來和開發組分享。它包括建立這個app項目的所有素材,如圖片、內容、字體、圖標、LOGO等等。
  • _exports(輸出): 每一次導出的PNG圖片都在這里,這個文件夾和市場部共享,因為他們總是最接近各種市場終端的人,比如網頁、手機端、社交媒體等。
  • UI-design(界面設計): 這是我的源文件,比如新做一個項目文件就把它保存在這里。

2. 選擇顏色

理由︰為我的項目確定最基本的色調

工具︰Coolors.co

確定顏色是起步時最簡單的一步了。如果你為一個已經存在的項目工作,顏色應該已經確定了,到了那個時候,直接去問同事好了。

我的設計系統里一般包括5種主要顏色︰

  • 主品牌色
  • 黑色
  • 重點1(成功)
  • 重點2(警告)
  • 重點3(危險)

至于為什麼這樣選顏色,可以閱讀之前寫過的這篇资讯︰medium.com

我使用的這個工具叫Coolors (作者是FabrizioBianchi)來幫助我生成一個顏色板。你只要敲一下空格它就會隨機為你調出顏色。一旦你找到喜歡的顏色後,鎖定它,然後生成你要的其它顏色。如果你的主品牌色已經確定了,你可以直接輸入十六進制的顏色值,鎖定那個顏色,然後敲空格來生成其它顏色。

你看到那個“夢寐以求”顏色了嗎?鎖定它。然後繼續操作直到你找到這5大顏色為止

一旦我已經確定了幾大主色,我會把它放到Sketch調色板模版文件里。這個模版文件是是已經存在的了,所以我只要更新剛才生成的顏色就可以了。

我的模版里有一個輔助色,但我並不總是需要它。

對于如何建立一個成熟的樣式表,可以看看這個︰medium.com

3. 選擇字體

理由︰給我的app增加字體

工具︰Google Fonts 和Font Pair

字體對設計也是非常重要,和顏色一樣,所以值得需要花點時間挑個合適的字體。因為挑選恰當的字體對于app的用戶相當重要。

嘿Jon,你打算給你的設計挑選一款怎樣的字體呢?

哈哈,我很高興你這樣問,故我在挑選字體時會有以下幾個問題自問自答一下︰

  • 可讀性︰這些文字適合長時間的閱讀嗎?
  • 伸縮性︰當字體過大或過小的時候它可以被容易辨認嗎?
  • 可變性︰是否有兩種以上的字重供選擇?

谷歌字體(Google Fonts)在去年更新了頁面,它真是太好用了。我總是用黑、白背景來確保字體在任何時候都可以使用,易于閱讀和辨識。

如果你喜歡使用多種字體,比如說標題一種,內容一種,你應試研究一下 Font Pair。他們做了大量的工作來展示兩種不同字體在同一終端的不同表現。它使得挑選兩種更好看搭配的字體變得非常簡單。多說一句,這些都來源于谷歌字體,所以你不必擔心找不到或者為其付費之類。

務必測試同一字體的文字、數字和標點符號。

因為總是在你發現一個漂亮的字體時,它有非常奇怪的數字如“9”或者一個詭異的感嘆號等。你肯定不想在已經做完 24屏後發現這個棘手的問題。

一旦在你挑選好字體(集)後,請在Sketch里面寫點東西,比如標題、內容、超鏈接等。除非字體放到资讯頁面里,否則絕對不要向設計中添加它們。如果你真的決定調整字體,請不要同步到已經上線的項目里面去。

我的Sketch模版文件已經定義好了非常標準的樣式,所以我才能直接選擇、改變或同步︰

4. 確認網格

理由︰確立軟件的整體一致性

工具︰Sketch 和計算器

現在非常常見的是劃分成8的倍數。

為什麼是 8?

很簡單,因為最主流的屏幕像素都是以8的倍數來劃分的。在下面這個表格,每一欄,無論寬、高最終都以 8像素來均分︰

根據這些信息,你就可以確定網格的尺寸。

首先,確定你的app如何呈現︰

全屏寬︰全屏寬的app直接到兩端邊框。如果這是個網頁app,你的設計將延伸到瀏覽器的最邊緣位置。

浮動︰一個浮動的app會貼在網格的固定部分,通常是窗口的中間位置。

對于浮動app,我喜歡參考線的間隔和欄同時被8整除,這里有個簡單的換算︰

(12欄*寬)+(11間隔*寬)= 整體布局寬度

混合︰一個混合app是由全屏寬和浮動元素組成。這個Medium網站就是一個混合app,因為它的標題是全屏寬,但是它的內容區域卻被固定在740像素。

△ 這個布局是一個有著某些全屏寬元素的浮動布局

最後一個提示 。默認Shift+>在Sketch里面移動是10像素。這一點非常惱人的當你在8像素網格里面操作時。但幸運的是,AnthonyCollurafici 做了一個叫Nudg.it的軟件來幫你解決這個問題。

5. 建立一個框架

理由︰為了快速迭代軟件布局和用戶體驗

工具︰就是矩形啦

在我制作線框圖模型之前,我喜歡做一個被我叫做“色塊圖”的東西來建立我的各種頁面布局區域。這個想法是初始你剛剛定義的網格,並且快速的形成塊形在頁面中最重要的位置。

我為一個聊天軟件設計的塊形︰

頁面的顏色沒有意義,就是顯得我有點愛國罷了。

這個雖然僅僅花費我90秒生成,但是這個是整個設計頁面的參考了。我寧願要這個色塊模型而不用線框圖是因為,每當我用線框圖的時候都會不自覺的開始設計高保真原型。我是一個差勁的設計師嗎?我只是看了太多細節的線框圖罷了,僅代表個人的觀點。

基本在用戶設計體驗階段,使用色塊圖工作流程能確保每個交互設計都能帶來良好的用戶體驗。

6. 轉化成高保真

盡管我並不想讓你們有如下的感覺……

……但這就是你展現你自己能力的時候了!

在高保真階段最重要的一件事就是堅持我們上面的5個步驟︰

  • 保存到相應的文件夾
  • 僅僅使用顏色板里面的顏色
  • 不要在字體里面迷失
  • 總是要遵照你的網格
  • 在高保真之前進行色塊圖設計

總結

這里就是我做新的設計項目的步驟了。如果你對我的Sketch設計模版文件有興趣的話,你可以在這個鏈接(UX Power Tools)里面查看。更詳情的資料都在這里。

譯者︰Tiger,Run!

歡迎關注微信公眾號︰非科班設計

fkbsjqr

「完整的合集」

  1. UI 設計|
  2. 品牌設計|
  3. 交互設計|
  4. 圖標設計|
  5. UED 團隊設計|

【特级毛片www,色综合天天综合网,国产成人综合亚洲 原創资讯 投稿郵箱︰yuan@rumotanartist.com】

================關于特级毛片www,色综合天天综合网,国产成人综合亚洲================
“特级毛片www,色综合天天综合网,国产成人综合亚洲“是國內人氣最高的網頁設計師學習平台,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書︰史上最全的設計師圖書導航︰。
設計微博︰擁有粉絲量190萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航︰全球頂尖設計網站推薦,設計師必備導航︰

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/sketch-app-design-project

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里