sketch做網頁設計

1、如何用Sketch進行網頁設計

基本設置
畫布
按住鍵盤 A 快捷鍵，可以創建畫布。 Sketch 已經良心的為你默認設置了各種設備尺寸，你想要的全都有，如下圖。

Artboard
柵欄
通過 Layout settings 設置柵欄[布局參考線]，這個功能好的真是不要不要的[下文回介紹其實際用處]，可以根據需要自主選擇每列寬度，間隔寬度以及最外側 margin 寬度，
Layout settings
Settings details
這時畫布上就出現了柵欄參考線，文欄位落的寬度，按鈕的寬度，圖片的寬度都可以根據柵欄進行合理設置。通過柵欄布局可以極大的統一頁面的布局設置，給人一種和諧美[Ctrl + L 可以快捷鍵顯示/隱藏柵欄]，效果如下。
Layout effect
字體
注重對比和統一。對比是指在需要突出區別的地方用不同字型大小，粗細和字體突出不同。統一是指對於網站同一元素，使用相同的字體設置，比如 H1, Body Text. 英文字體建議兩種即可, 一個 sans-serif 字體作為標題，顯眼；一個 serif 字體作為正文，易讀。可以提前設計好各個字體的數值，利用 Sketch 的 Style Text 功能進行保存，方便以後頻繁使用。也可以再設計的時候，邊做邊保存[前者適合在經驗用戶，後者更適合初學者]，如下圖。
Font categories
對字體另外一個重點是確定 line height [行高]，確定行高的作用是方便確定控制項上下 margin, 左右 margin 可以通過柵欄進行確定。比如你確定默認字體大小為 20px, 行距為 1.5，則行高 = 20px * 1.5 = 30. 那麼控制項之間的上下間距則可以設為 30px 的倍數，比如 30px, 60px, 90px, 以此類推。間距和行高相同可以使頁面看起來更加和諧美觀。

2、如何用sketch進行網頁設計

那個做手機端APP比較方便吧。軟體是英文版的，可以搜下翻譯，用過PS那麼sketch就比較順手了，因為很多符號包含的意思都是一樣的

3、如何用 Sketch 進行網頁設計

基本設置
畫布
按住鍵盤 A 快捷鍵，可以創建畫布。 Sketch 已經良心的為你默認設置了各種設備尺寸，你想要的全都有，如下圖。

Artboard
柵欄
通過 Layout settings 設置柵欄[布局參考線]，這個功能好的真是不要不要的[下文回介紹其實際用處]，可以根據需要自主選擇每列寬度，間隔寬度以及最外側 margin 寬度，
Layout settings
Settings details
這時畫布上就出現了柵欄參考線，文欄位落的寬度，按鈕的寬度，圖片的寬度都可以根據柵欄進行合理設置。通過柵欄布局可以極大的統一頁面的布局設置，給人一種和諧美[Ctrl + L 可以快捷鍵顯示/隱藏柵欄]。
Layout effect
字體
注重對比和統一。對比是指在需要突出區別的地方用不同字型大小，粗細和字體突出不同。統一是指對於網站同一元素，使用相同的字體設置，比如 H1, Body Text. 英文字體建議兩種即可, 一個 sans-serif 字體作為標題，顯眼；一個 serif 字體作為正文，易讀。可以提前設計好各個字體的數值，利用 Sketch 的 Style Text 功能進行保存，方便以後頻繁使用。也可以再設計的時候，邊做邊保存[前者適合在經驗用戶，後者更適合初學者]。
Font categories
對字體另外一個重點是確定 line height [行高]，確定行高的作用是方便確定控制項上下 margin, 左右 margin 可以通過柵欄進行確定。比如你確定默認字體大小為 20px, 行距為 1.5，則行高 = 20px * 1.5 = 30. 那麼控制項之間的上下間距則可以設為 30px 的倍數，比如 30px, 60px, 90px, 以此類推。間距和行高相同可以使頁面看起來更加和諧美觀。

4、UI設計可以干什麼？

 ui設計要做什麼，ui設計主要做什麼工作？ui設計作為設計大類的一個細分崗位，如今已經隨著時間的推移成為了最熱門的職業。而現階段非科班轉行，依靠興趣的入行的人也非常多。但是很多人並不完全了解ui設計師是做什麼的，要想知道這個問題，那就要先知道ui設計師工作中的產出有哪些？

1、手機APP UI

APP界面

定義：根據產品需求,在界面中設計和排版對應的交互、視覺元素。

要求：能滿足平面四要素的正確性;知道如何應用標準的系統Kits;能合理定義字體和元素尺寸;熟悉並能設計主流的組件類型。

軟體: Sketch、XD

界面圖標

定義：包含APP啟動圖標,以及應用內的一般工具圖標

要求：對圖標的基礎規范有所了解,了解主流的圖標類型及使用場景,在繪制整套圖標時可以保持基本的風格一致,形式簡約美觀

軟體：Ai、PS

可交互原型

定義：用來展示可以點擊並跳轉的交互原型文件

要求：能清晰表達頁面跳轉邏輯即可

軟體： Sketch、XD、藍湖、墨刀

基礎動效

定義：可以表達觸發界面交互效果時的動畫

要求：了解可以實現的動畫范圍,並能明白如何具體編寫表達動畫的文檔。

軟體：AE

標注切圖

定義：將設計稿的內容進行標注,和將開發過程中需要的圖形進行導出

要求：了解對設計還原中開發人員需要知道的參數,了解不同圖片格式的作用與區別並能對應導出符合規范的切圖。

軟體：藍湖、 Sketch、XD、 Markman

設計規范

定義：設計到開發中要遵守的相關規範文檔

要求：針對最主要色彩、元素使用的規范簡潔明了,容易被執行

軟體：任意設計軟體或ofce

2.PC網頁界面

網頁界面

定義：主要是公司官網或產品介紹頁,將需求中的內容合理置入畫布並進行排版和設計

要求：了解基本的網頁畫布設置和規范,網頁的主流結構和交互方式,能設計出簡約美觀,表意清晰的設計。

管理界面

定義：根據業務需要,設計在網頁端操作的管理系統,用來管理財務、庫存、客戶信息等的工具

要求：能了解基本的管理界面組件功能和交互規則,網頁拉伸適配方式,和文字、色彩應用

軟體：XD、 Sketc

標注切圖

定義：對設計稿的說明和導出開發用的圖片。

要求：能導出正確的切圖,和必要的區域進行說明。

軟體：Sketch、XD、藍湖、墨刀

3.運營設計（廣告宣傳圖）

Banner設計

定義：根據運營、營銷活動的需求設計岀在產品廣告位中展示的廣告圖

要求：能掌握基本的圖文混排方法,能對文字做出簡單有效的表現,具備入門的合成技巧

H5活動頁

定義：根據運營、營銷活動的需求設計岀在網頁中展示的活動專場頁面。

要求：了解活動頁的基本結構,手機端網頁設計的規范,有入門的主視覺設計能力

ui設計要做什麼，ui設計主要做什麼工作？這個問題你清楚了嗎？如果你還有其他關於ui設計的問題歡迎持續關注易夏嵐或者留言評論與我進行交流哦~

5、如何用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所有頁面的交互樣式，但並不適用於作為交付物，提供給開發和測試同學在實際工作中使用，主要的問題有以下兩點：
標注信息無法體現，標注信息包括了「頁面之間的跳轉關系」和「相關交互邏輯的說明性文案」。在sketch內，由於位於畫板之外的元素無法顯示並導出，如上，即以一個iPhone6頁面為一個畫板，造成畫板之外的「箭頭」或「文字」就無法派上用場；
功能點結構化的展示比較欠缺，上面也提到了，這種形式比較適合進行全局展現，但在實際項目運作中，會拆分成多個相關的獨立功能點，並且每個主要功能點，又要分為正常主幹流程和多個異常分支流程，同時對於分支流程來說，不一定需要整個頁面做信息呈現，很可能局部模塊展示就足夠了。
針對第1個問題，其實也有專門用來做標注的sketch插件，比如Notebook，直接用插件做標注雖然方便，但是格式太受限，非常的不靈活，尤其是經常需要修改時候，所以在我試用了兩次之後，最終還是放棄了。
2.2 採用樣式
否定了上邊提到的APP原型樣式後，我們又該如何通過其它的樣式來解決遇到的一些問題呢？
在sketch中，是以畫板或切片為單位進行導出的，所以我們可以根據需要，自由把握一個畫板的大小，而不是局限於以一個iPhone6頁面為一個畫板。比如如果需要全局展示APP整體樣式，則可以將所有APP頁面放在一個畫板中，如果只是講解某個具體的功能點，則可以只將涉及到的APP頁面放在一個畫板中。
那每個具體的APP頁面該怎麼體現呢，很簡單，通過一個375×667px 的矩形框來表示一個常規的APP頁，或許你已經注意到了，這個尺寸正好是sketch默認的iPhone6畫板的大小，採用這個尺寸矩形的好處就是，所有自帶的控制項仍可以繼續無縫的使用。
這樣做的另一個好處，APP頁面之外可以體現更多的元素，比如表示跳轉關系的「箭頭」，比如解釋性「文字」，比如表示分支流程的「局部模塊」

如圖所以，其中有幾點使用習慣可以參考一下：
可以針對每個畫板或者某個功能模塊，宏觀上用一句話概括一下功能點，從而幫助閱讀者能快速的知道下面的交互針對哪個具體功能，如圖中左上角的標題所示，說明這是與「增加在線客服」相關的需求；
可以對每個具體的頁面取一個小標題，從而幫助閱讀者快速定位這是哪一個頁面，如圖中「1.1 個人中心」、「1.2 在線客服」兩個頁面標題，同時在需要引用其它相關頁面的時候，也可以通過1.1、1.2的序號進行快速定位；
對於每個頁面的注釋信息，可以採用一個固定的特殊顏色來進行區分，對於顏色選擇恐懼症來說，直接從sketch全局顏色庫中選擇一個即可，另外注釋部分放置的位置，可以在相關頁面的右側，也可以在下側，具體怎麼選擇可以根據信息多少等實際情況來考慮；
對畫板中相關的元素根據相關性進行靈活的編組，比如可以將如圖所示的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 下載地址：utom/sketch-measure 這塊插件功能非常強大，導出只是其中一個（我就是用這塊插件來導出html格式原型），更多功能可以自己去探索。

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

6、網頁UI設計稿里的標注是用什麼軟體標注的

在國外做項目的時候，同事都在用zeplin，使用體驗也是非常順暢的。國內的開發設計流程環境不同，zeplin反而水土不服，現在團隊主要在用摹客iDoc，除了基礎的標注切圖功能以外還有交互原型和需求文檔功能，能夠很好地應對目前的產品開發環境，整體使用體驗比不上國外已經成熟zeplin，但是還是算易用

7、用sketch設計中文網頁時使用什麼字體合適

中文用得最多的是微軟雅黑

8、sketch設計網站切圖尺寸會按原尺寸導出就行是嗎

開發時需要的切圖尺寸很多，為了避免需要做很多切圖的麻煩，建議用藍湖一鍵切圖吧，效率高，而且開發可以選擇需要格式的切圖進行下載使用。

9、如何用 Sketch 進行網頁設計

Sketch基本設置要了解。
畫布
按住鍵盤 A 快捷鍵，可以創建畫布。 Sketch 已經良心的為你默認設置了各種設備尺寸，你想要的全都有
柵欄
通過 Layout settings 設置柵欄[布局參考線]，這個功能好的真是不要不要的[下文回介紹其實際用處]，可以根據需要自主選擇每列寬度，間隔寬度以及最外側 margin 寬度，見下圖。
這時畫布上就出現了柵欄參考線，文欄位落的寬度，按鈕的寬度，圖片的寬度都可以根據柵欄進行合理設置。通過柵欄布局可以極大的統一頁面的布局設置，給人一種和諧美[Ctrl + L 可以快捷鍵顯示/隱藏柵欄]，效果如下。
字體
注重對比和統一。對比是指在需要突出區別的地方用不同字型大小，粗細和字體突出不同。統一是指對於網站同一元素，使用相同的字體設置，比如 H1, Body Text. 英文字體建議兩種即可, 一個 sans-serif 字體作為標題，顯眼；一個 serif 字體作為正文，易讀。可以提前設計好各個字體的數值，利用 Sketch 的 Style Text 功能進行保存，方便以後頻繁使用。也可以再設計的時候，邊做邊保存[前者適合在經驗用戶，後者更適合初學者]，如下圖。
對字體另外一個重點是確定 line height [行高]，確定行高的作用是方便確定控制項上下 margin, 左右 margin 可以通過柵欄進行確定。比如你確定默認字體大小為 20px, 行距為 1.5，則行高 = 20px * 1.5 = 30. 那麼控制項之間的上下間距則可以設為 30px 的倍數，比如 30px, 60px, 90px, 以此類推。間距和行高相同可以使頁面看起來更加和諧美觀。
調色板
一個好的配色對界面美觀的重要性不言而喻。Sketch 也貼心的為用戶提供了顏色版用於記錄顏色，方便你重復使用，見下圖。
最主要的是一下幾個顏色，背景色，默認字體顏色，減淡字體顏色，強調色，邊框顏色，和適當數量的輔助色[Material Design鼓勵用多種顏色，用鮮明大膽顏色]。這里再說一下陰影顏色，Material Design 建議使用 #000 全黑，然後減弱 opacity 不透明度，而不是直接設置灰度顏色。因為這樣可以保證陰影不論在亮色還是暗色背景下都有一個良好的視覺效果。
操作
頁面
Sketch 的左側提供了頁面導航列表。用戶可以創建不同頁面，同一頁面中又可以創建不同畫布。這樣一來，用戶便可以將網站的所有頁面有條理的保存在一個 Sketch File 中[見下圖]，it is amazing!
間距
Sketch 對於排版可謂是考慮的極其周到。學習 CSS 的朋友應該知道在排版時，對於 margin 的四個數值往往糾結不以，往往憑感覺設置。而 Sketch 可以在設計時就解決這個問題，滑鼠選中指定元素，按下 Alt 鍵，界面自動現實該元素的 margin top, right, bottom, left. 精確到 1px 的設計，讓設計稿和實現稿無縫對接，見下圖。
Sketch 還提供了保存組件的功能。如果某些元素在設計中會重復出現，則可以利用 Symbol 功能進行保存，需要時直接插入即可。一次設計，循環使用。
結構
一個好的交互設計師需要對網站結構有一個非常清楚的認知。這個網站的目的是什麼，用戶群是誰，為了實現目的需要有哪些功能，這些功能如何組織成頁面，頁面之間如何跳轉，功能如何實現等。比如該網站是銷售網站模板的購物網站，導航欄有如下幾項：主頁，聯系頁，支持頁，購物頁，個人賬戶，購物車，如下圖。
先設置主頁，然後由主頁發散延展到其他界面。當然，這一切應該在 UI 設計之前的交互稿就考慮清楚。UI 更加強調美觀性，如何利用美觀更好的引導用戶實現既定目標。
交互
設計時需要考慮用戶使用網站時的交互場景。
界面的交互狀態，比如登陸和未登錄時界面的不同狀態，如下圖。
元素的交互狀態，Hover 和未 Hover，Click 和未 Click，是否 Disabled等。細節產生美！
插件
Sketch 的插件是獨立與 Sketch 本身，可以第三方開發的。在這里像那些默默奉獻的偉大程序員們表示無比的敬意。強推插件下載軟體 Sketch Toolbox[見下圖]。可以一鍵下載/卸載插件，再也不用從 GitHub 上下載然後拖到指定文件夾了，節省了大量時間。

10、網頁設計屬於什麼 領域？

平面設計包括一切平面,包括網頁設計,現在做網站需要排版、插圖內等，這zhuan都是跟平面設計分容shu隔不開的，但做網站需要平面設計師，兩者有聯系，但不一樣。
如果你想學習的話，可以先從軟體學起來，一般會用SKETCH、AXURE這些，還要用藍湖設計協作平台，方便切圖和標注信息，而且還可以對文件進行在線保存和管理，就算改了再多版，每一版都能找到不會丟。