中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

需要先申明的一點，本文不是一篇sketch的入門教程，如果對sketch一點不熟悉的話，建議先看一遍sketch用戶手冊。

一年前寫過一篇文章：如何用Axure快速制作APP交互原型，相對來說還算比較受歡迎。從文章的標題也能看出兩點重要信息：工具是「Axure」，主要特點是「快速」。

Axure作為一個老牌的設計工具，算是產品經理入門必備，而最近幾年火起來的一個設計軟件——sketch，則異軍突起，逐漸成為了互聯網從業人員的新寵，不僅僅可以拿來畫交互，也是UI設計的利器。所以，用sketch產出的內容有一個很大的特點就是顏值高，這篇文章就嘗試講解一下如何用「sketch」制作「精致」的APP原型，當然只要使用熟練，速度也是足夠快的。

1. sketch自帶模板

Sketch做的非常人性化的一點，就是自帶了很多模板，而且用來畫交互完全夠用，省去了從網上各種非正規渠道找資源的麻煩，如果你是sketch的老用戶，而不知道自帶模板功能的話，真的是要面壁思過了。

其中，APP相關的模板有兩個“iOS用戶界面設計”和“Material Design”，顧名思義，分別用來設計ios界面和Android界面。以ios為例，模板中包含了常用的各種控件：狀態欄、導航欄、彈窗、鍵盤等等，當我們需要的時候，直接拿過來用，不僅省事而且非常精致，并且如果我們多去研究并拆解一下官方的這些控件的制作過程，能給我們提供很多設計思路，比如如何用各種形狀拼合成想要的圖形，如何利用填充和陰影達到想要的視覺效果……這部分就不展開講解了，留給你自己去發現。

2. APP原型樣式

知道利用sketch自帶的APP界面模板之后，我們首先討論一下APP原型采用哪個樣式比較合適。

2.1 待選樣式

在Sketch中插入畫板的時候，軟件會提供一些常用設備的尺寸供用戶選擇，我們需要用到的是iPhone6（375×667px），為什么一定要采用iPhone6呢？非常重要的一點，是因為上邊提到的sketch自帶模板，iOS界面的所有控件大小全部是以iPhone6尺寸為基準的，拿過來可以直接使用。如果采用了plus或se的手機型號尺寸，控件大小和畫板大小標準不一致，還得需要人為調整，異常的繁瑣。

當我們在同一個畫布（或稱為頁面）下插入多個iPhone6畫板時，sketch會自動排列所有的畫板，間隔100px。然后經過一番設計，在各個畫板上填充相關元素之后，大概就形成了這樣一份交互稿，如下圖：

看上去，整齊劃一、非常美觀，所以這種樣式比較適合從全局的角度來展示APP所有頁面的交互樣式，但并不適用于作為交付物，提供給開發和測試同學在實際工作中使用，主要的問題有以下兩點：

1. 標注信息無法體現，標注信息包括了“頁面之間的跳轉關系”和“相關交互邏輯的說明性文案”。在sketch內，由于位于畫板之外的元素無法顯示并導出，如上，即以一個iPhone6頁面為一個畫板，造成畫板之外的“箭頭”或“文字”就無法派上用場；
2. 功能點結構化的展示比較欠缺，上面也提到了，這種形式比較適合進行全局展現，但在實際項目運作中，會拆分成多個相關的獨立功能點，并且每個主要功能點，又要分為正常主干流程和多個異常分支流程，同時對于分支流程來說，不一定需要整個頁面做信息呈現，很可能局部模塊展示就足夠了。

針對第1個問題，其實也有專門用來做標注的sketch插件，比如Notebook，直接用插件做標注雖然方便，但是格式太受限，非常的不靈活，尤其是經常需要修改時候，所以在我試用了兩次之后，最終還是放棄了。

2.2 采用樣式

否定了上邊提到的APP原型樣式后，我們又該如何通過其它的樣式來解決遇到的一些問題呢？

在sketch中，是以畫板或切片為單位進行導出的，所以我們可以根據需要，自由把握一個畫板的大小，而不是局限于以一個iPhone6頁面為一個畫板。比如如果需要全局展示APP整體樣式，則可以將所有APP頁面放在一個畫板中，如果只是講解某個具體的功能點，則可以只將涉及到的APP頁面放在一個畫板中。

那每個具體的APP頁面該怎么體現呢，很簡單，通過一個375×667px 的矩形框來表示一個常規的APP頁，或許你已經注意到了，這個尺寸正好是sketch默認的iPhone6畫板的大小，采用這個尺寸矩形的好處就是，所有自帶的控件仍可以繼續無縫的使用。

這樣做的另一個好處，APP頁面之外可以體現更多的元素，比如表示跳轉關系的“箭頭”，比如解釋性“文字”，比如表示分支流程的“局部模塊”

如圖所以，其中有幾點使用習慣可以參考一下：

1. 可以針對每個畫板或者某個功能模塊，宏觀上用一句話概括一下功能點，從而幫助閱讀者能快速的知道下面的交互針對哪個具體功能，如圖中左上角的標題所示，說明這是與“增加在線客服”相關的需求；
2. 可以對每個具體的頁面取一個小標題，從而幫助閱讀者快速定位這是哪一個頁面，如圖中“1.1 個人中心”、“1.2 在線客服”兩個頁面標題，同時在需要引用其它相關頁面的時候，也可以通過1.1、1.2的序號進行快速定位；
3. 對于每個頁面的注釋信息，可以采用一個固定的特殊顏色來進行區分，對于顏色選擇恐懼癥來說，直接從sketch全局顏色庫中選擇一個即可，另外注釋部分放置的位置，可以在相關頁面的右側，也可以在下側，具體怎么選擇可以根據信息多少等實際情況來考慮；
4. 對畫板中相關的元素根據相關性進行靈活的編組，比如可以將如圖所示的1.1和1.2兩個頁面編成兩個大組，同時對每個大組，再根據“頁面”和“注釋”兩部分分別編組，當然層級可以繼續下探，比如“注釋”組中可以根據“文字”、“箭頭”維度繼續分組，具體維度的和粒度，可以根據個人習慣而定；

3. 控件使用技巧

講完了原型樣式，下面說一下控件的使用技巧，主要有組件和文本樣式兩部分

3.1 組件

上邊提到過，sketch自帶模板中包含了很多常用控件，我們可以直接在自帶的模板基礎上進行設計，也可以自己創建一個新文件作為模板，然后根據情況，將需要使用到的控件復制過來用。我個人傾向于后一種，因為很多時候不需要這么多，按需提取即可，另外除了直接采用自帶控件，自己也可以創建，同時可以靈活的維護多套模板，使用在不同的項目中。

無法采用哪種使用形式，控件的使用中都會涉及到了一個非常重要的sketch功能點，那就是“組件/Symbol”，sketch自帶模板中的控件實際上就是組件的形式，它能夠幫助我們方便的在多個頁面和畫板中重復運用某組內容，其實類似于Axure中的母版功能。比如APP端常用的cell控件，可以將常用的幾種類型維護成組件，需要使用的時候，直接拖過來用，方便快捷。

除了系統層面的“狀態欄”、“導航欄”、“鍵盤”等組件，針對特定的項目，自己也可以將常用的某個模塊創建為組件，比如電商項目中常用的商品模板，可以創建“商品/橫排”“商品/豎排”兩種形式的組件，從而可以不斷的快速復用。

并且有個命名的小技巧可以參考一下，通過符號“/ ”進行名稱的層級劃分，sketch會自動將“/”符號之前名稱相同的組件歸為一組，分門別類之后，我們在插入組件的時候就能快速定位，尤其是組件比較多的時候。

在使用“組件”功能的時候，我們會經常遇到一種情況，視覺樣式都是一樣的，但是文案有不同，比如“按鈕”控件，和上邊提到的“cell”控件。sketch非常完美的解決了這個問題，當我們插入一個組件后，可以用特定的文字去覆蓋原有組件的文字，甚至不透明度、混合形式、陰影都可以自定義。如下圖所示，我從同一個組件插入了三個按鈕，每個都可以配置不同的文案和不透明度。

綜上，我們可以直接復制sketch中自帶的控件（以組件形式存在），也可以自己把常用的某些模塊創建為組件，這些就組合成了針對某個項目的特定組件庫，在畫交互的時候直接可以復用，并且還支持文案、不透明度等自定義，效率和美觀性都得到了保障。

3.2 文本樣式

“組件”功能的核心使用場景就是某些元素經常需要復用在不同地方，字體和圖層也如此。在一個項目的交互稿中，使用到的樣式種類是有限的，如果對每個元素如果都單獨維護，會比較繁瑣，sketch中的“文本樣式”和“圖層樣式”功能就完美解決了這個問題，針對文字和圖形元素，在“檢查器”中選擇需要共享的樣式，能夠快速的將顏色、陰影、不透明度等樣式配置套用過來，而不再需要做重復性的樣式配置，非常的便捷。

可以根據需要，整理一套自己常用的樣式規范，比如”正文常規性文字”，統一采用“微軟雅黑，色值#ffffff，字號18pt”的樣式，在之前提到的“頁面注釋說明”，統一采用“微軟雅黑，色值#5CD600，字號20pt”…….將規范維護成共享的樣式文本，在需要的地方直接復用即可，不僅僅提高了效率，并且保證了交互稿統一美觀性。

熟練使用“組件”和“文本樣式”，不僅僅是在創建的時候能提高效率，尤其是在涉及修改時，你會發現只要修改一處，全局同步調整完成，那種快速帶來的痛快感更加明顯。當然效率的提升是一方面，通過不斷復用標準精致的控件，采用統一規范的文本樣式，也保障了交互稿整體的美觀性。

4. 原型文件維護和導出

原型設計的一些思路說的差不多了，那不同項目以及不同版本的原型該怎么維護比較合適，將原型同步給團隊成員的方式有哪些呢？

4.1 原型文件維護

需要注意的一點是，上邊提到的“組件”和“文本樣式”，它們均保存在某一文件中，并不能在不同文件中共享，并且這兩個東西是跟項目有比較大的相關性，所以我比較傾向于一個項目維護一個sketch文件，比如“某某應用APP端原型”文件。

以一個頁面（或稱為畫布）呈現一個版本的原型內容，然后在某個頁面/版本內，以一個畫板呈現一個功能點模塊的原型內容。當然，主體思路是這樣的，特殊情況也可以做靈活的調整，比如對應用的第一個版本來說，原型內容會非常多，也可以分成多個頁面來呈現。

這樣做，不僅僅是“組件”和“文本樣式”可以在一個項目內復用，其它相關的元素，比如某個頁面，或者某個畫板，都可以更加方便的復用。

4.2 導出和共享

然后簡單說一下導出，對于交互稿來說，基本上以畫板為單位進行導出就夠了，至于是圖片格式，還是PDF等其它格式，以團隊內其他成員普遍接受的形式既可。當然也可以用插件，以HTML的格式進行導出，我常用的就是這一種，好處就是以網頁形式打開，在左側可以看到所有畫板的列表，也就是某個版本內所有的功能點信息，相互切換也比較方便。

最后推薦一個sketch插件，sketch-measure 下載地址：https://github.com/utom/sketch-measure 這塊插件功能非常強大，導出只是其中一個（我就是用這塊插件來導出html格式原型），更多功能可以自己去探索。

5. 總結

以上，基本就是用sketch設計APP原型的整體思路，產出物從視覺上看會非常精致，完全達到了高保真原型的水準，使用熟練的話，制作效率也非常高。在同樣甚至更短的時間內，如果能設計出更精致的原型，何樂而不為呢？

當然，設計思路不僅僅適用APP端，也同樣適用于web端項目，只需要將頁面大小和相關控件更換一下就可以。

若要文中截圖內容的sketch文件，歡迎交流。

本文由人人都是產品經理專欄作家 @劉鵬（微信公眾號：pengideas ） 原創發布于人人都是產品經理?。未經許可，禁止轉載。