8000字教你畫出高顏值原型圖

語言: CN / TW / HK

編輯導語:一個高顏值的原型圖,能夠在一定程度上體現出你的專業度,起到錦上添花的作用。那麼,要如何畫出高顏值的原型圖呢?本文作者對此作出了分析,一起來看一下吧。

最近有朋友要轉產品,自己在學習畫原型,怎麼說呢,原型畫的確實差點意思。

雖說大多數內容臨摹出來了,但是還有很多可以優化的地方,像對齊、顏色、間距就處理的不好。

那我們需不需要畫出好看的原型?

我認為有必要!

高顏值的原型圖在一定程度上會體現出你的專業度。

如果你在面試的作品集中畫出好看的原型,加分;

如果你是新入職一家公司畫出好看的原型,加分;

如果給老闆、客戶展示好看的原型,加分;

但是呢,要話說在前:好看的原型圖僅是錦上添花。

原型是將需求轉化成頁面功能,最重要的能夠表達出功能邏輯,讓產品經理能夠快速傳達出自己的想法,讓團隊成員能夠認識產品需求內容。

而好看的原型是在此基礎上對原型頁面進行視覺處理,讓看原型的人能夠獲得更好的體驗,畢竟“顏值即正義”。

畫出好看的原型並不複雜,我們只需要掌握基本的UI設計原則,就能收穫好看的原型。

我找到我剛學習產品時畫的原型圖,並按照下文的規範進行了優化,大家可看下對比效果:

我們接下來說說如何快速畫出好看的原型,內容較多,建議收藏,隨手幫忙點個贊~

01 原型圖要保證的原則

1. 層級關係

在原型中,我們要明顯區分出不同模組、不同元素重要程度。這樣原型頁面才有節奏感。

當層級關係不突出,對比不明顯,會將所有的資訊混雜在一起,顯得凌亂。

左側的原型層級關係太弱,沒有視覺重點,右側原型通過顏色、字型大小、使用分割線、調整間距大小等方法來達到層級劃分的效果。

總結來看就是: 突出重要元素,弱化次要元素。

層級關係的劃分可以通過顏色、字號、字重、間距、分割線等方式。對應的層級關係可檢視下圖:

根據內容重要程度不同,選擇不同的顏色、字號、字重、間距即可,這些內容我們下邊會詳細介紹。

2. 內容關聯性

對於內容關聯性,我分為2個,一個是元素的關聯性,一個是填充內容的關聯性。

  1. 元素的關聯性:元素是指原型中的元件元素是指對介面元素內容進行分組,從視覺上將關聯內容合併在一組中,其最終目的也是為了劃分層級關係。
  2. 填充內容的關聯性:比如將文案按照真實內容進行填充;這個並不是必須要做的,你也可以直接用文字直接說明內容是什麼。

3. 設計一致性

一致性是指原型中的元件內容保持一致,如字型相同、間距一致、各類元件相同,彈窗按鈕位置相同等。

一致性讓原型介面非常規範,有了一致性,我們就可以直接複用各個元件,制定出元件庫,相同元素可直接複用,極大提高畫原型效率。

4. 不要過度

不要過度追求到畫素級標準,不要過度新增裝飾性內容,不要過度追求動效。

首先對自己的設計要求嚴格是好事,但是我們需要明確得是原型的作用,它不是UI設計稿,它是你表達想法的視覺化介面。

我不建議畫原型到畫素級別,是指用字型10px還是11px,圓角用10px還是8px等等。幾個畫素影響不到你的原型,摳畫素是UI乾的事,把摳畫素的精力用在需求分析上會更有用。

另外不要過度追求裝飾性內容,一個矩形就能表達出的內容,不建議為了更好的效果而新增複雜的個性化設計,原因就是費事。

還有不要過度追求動效,新增太多的動效費時費力,投入產出低,比上邊提到的摳畫素還要費事。

一定不要陷入動效的陷阱裡,過度追求高大上的動效內容。原型使用基礎的頁面跳轉、隱藏/顯示、動態面板就可以了。

02 掌握基本的設計規範

對於UI設計搞都有自己的設計規範,而對於原型設計,也是同樣的。

但是原型的設計規範不需要像UI設計稿那麼嚴格。我們接著看看有哪些規範:

1. 尺寸

1)手機端:寬375px,首屏高667px或者812px。

推薦375×667,因為UI設計稿也按照這個尺寸進行設計的。

雖然375×812尺寸在iOS機型中佔的比例較多,UI設計稿也按照這個尺寸進行設計,但是我不建議使用。

原因是在這個機型中,狀態列變成了44px、底部又有安全區域,對我們原型設計沒有任何好處。倒不如接著使用375×667。

為啥就是375×667這個尺寸,我簡單說下,瞭解即可。

在開發時,使用的單位是pt,在螢幕上顯示時,使用的單位是px。

UI設計使用375×667pt進行設計,最終在匯出一倍圖@1x、二倍圖@2x、三倍圖@3x的切圖,就是將pt單位×1、×2、×3得到px單位的圖片,提供給開發,用於適配不同機型。

375×667這個尺寸在iOS所有的機型中處於中間尺寸,向上向下都能很好的適配,所以就選擇了它。安卓也是按照這個尺寸進行設計。

另外按照這個尺寸設計,我們在預覽原型時,在螢幕上也能顯示出全部內容。

在文章中提到的字號、間距等大小,都是基於375×667(1倍圖)來制定的。

2)PC端:建議寬1440px,首屏高度900。

對於PC端的原型尺寸可按照寬1440px,首屏高900px進行設計即可,側邊導航欄建議200px,頂部導航欄建議60px。

3)平板:首屏768×1024px。

2. 顏色

原型儘量使用黑白灰。在Axure的顏色色板裡的黑白灰完全可以滿足原型的使用,不建議自己單獨弄一套顏色規範。

我將我常用的黑白灰顏色提取出來後,我們看下:

顏色從左到右以及變淡,在頁面中表達的層級關係也依次降低。

在頁面中層級最高、重要程度最高的,使用最左側的純黑,次重要內容使用灰色,依次遞減。

顏色的選擇也受底色的影響,上邊的例子通過白色底進行設計的,對於其它底色,我們可以在調整,選擇不同顏色進行對比突出。

對於遮罩的顏色,我們可以選擇純黑,調整為50%透明度。

有些文章說不建議使用純黑,但是我認為純黑能更好的體現出層級關係,大家可以根據自己需要來調整。

具體使用什麼顏色,我們不建議嚴格按照色號,只要能夠通過顏色區分出層級即可。

除了基本的黑白灰外,我認為原型中也是可以新增顏色的,像基本的語義色。

另外像按鈕、tab頁選中狀態、複選框、單選等元件的選中狀態,也是可以新增顏色的。

但是不要使用色調較高的顏色,而是採用色調適中,不刺眼的顏色。

如果你們公司有自己的品牌色,你可以找UI要下,使用到自己的原型中。

很多文章說,原型圖中不要新增顏色,會影響到UI設計,高階的UI設計師是不會被影響的。

3. 字型、字號、字重、行間距

原型中使用1種字型就夠了,你可以使用Axure預設的Arial字型。

如果你想更好看一點,推薦使用蘋方字型,然後將蘋方字型設定為預設字型。

如果你沒有安裝蘋方字型,文末有獲取方式,安裝好字型後,重啟Axure即可,然後將蘋方字型設定為預設字型。

Axure預設字型設定方式:專案-元件樣式管理-字型-選擇蘋方。

字號是指字型大小,常用大小為20px、18px、16px、14px、12px、10px。

字重是指字型重量,就是細體、中等還是加粗,經常用的是中等與加粗,細體沒用過。

不同字號、不同字重也是用來區分不同層級關係的。

我們需要把顏色+字號+字重組合,就能得到一套完整的文字層級關係。

我建議如下:

  • 一級標題:20px、加粗,顏色#000000
  • 主標題:18px、選擇性加粗,顏色#000000
  • 次標題:16px、選擇性加粗,顏色#000000
  • 小標題:14px、選擇性加粗,顏色#000000
  • 正文:14px、選擇性加粗,顏色#000000/#333333
  • 輔助文字:14px/12px,不加粗,顏色#333333/#555555
  • 次級文字:12px/10px,不加粗,顏色#555555/#7F7F7F

示例如下:

不需要特意去記,在畫原型時,根據層級關係與實際效果再去調整。

行間距:在Axure9中使用不同字型、字號時,會自動調整行間距。我們可以直接按照Axure9自動的行間距大小即可。

如果你想更好看些,可以按照字號大小的1.5倍調整行間距,如正文14px字號對應行間距為21px。

當字型內容較多時,可適當調大行間距。

還有字間距,可以不用管,如果你想更好看,自己手動調整看效果即可。

3. 間距、對齊、分割、分佈

一個好看的原型一定是要有間距、對齊的。

為了保證內容的可讀性,體現出留白,以及層級關係,我們在畫原型時一定要把間距和對齊同時考慮到。

1)安全間距

在畫原型前,我們先在原型兩側保留安全距離。可以選擇10px,或者20px。

移動端我一般選擇10px,可以通過拉出標尺線,或者放寬度為10px的熱區進行限制。

2)具體間距

不同模組間的間距:推薦使用10px、20px,間距可按照10的倍數進行調整。

模組內各種間距:我分為3個,分別是模組內間距、子模組間距、子模組內元素間距。

對於模組內的間距,建議只關注上下左右的間距。左右間距相同,上下間距相同。

移動端大小推薦10px/15px/20px,但是不需要特別標準,在滿足對齊後,間距能夠區分出每組關係即可。

PC端可選擇性放大到20px、40px。

子模組間距:不建議摳畫素,能分出層級即可。

可直接選中每個子模組,然後水平分佈/垂直分佈讓保證間距相同,但需要保證間距能達到分組的效果。

如果你想摳畫素,可按照5px的倍數調整。

子模組內元素元件間距:不同元素間的間距我一般不關注,只要間距能達到分出層級的效果:相關元素靠近,不相關元素間距稍微大點。

你也可以按照5px的倍數進行調整,但是不建議這樣做,沒必要去摳畫素。真要細摳的話,那你就不是畫原型了,你是在搞UI了。

在Axure9中我們可以設定【標尺·網格·輔助線】勾上顯示網格、元件對齊。

【元件對齊設定】中勾上元件對齊、邊緣對齊,垂直與水平設定為5畫素。

這樣就可以顯示出間距大小,並能自動吸附對齊。

5. 對齊

對齊是一個原型中最基本的要求,就算你的字型、間距等都不規範,但是有了對齊,原型也會看起來好看很多。

對齊分為居左對齊、垂直居中對齊、居右對齊、頂部對齊、水平居中對齊、底部對齊。

在Axure中,可直接選中要對齊的元件,點選頂部導航欄,即可自動對齊;對齊時以第一個選中的元件為標準進行對齊。

同時在Axure9的設定中,把網格對齊、輔助線、元件對齊都勾上,這樣就可以自動對齊。

有些對齊原則可以直接參考(以下內容引用Antdesign):

1)表單類對齊

冒號對齊(右對齊)能讓內容鎖定在一定範圍內,讓使用者眼球順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。

2)文案類對齊

如果頁面的欄位或段落較短、較散時,需要確定一個統一的視覺起點。

3)數字類對齊

為了快速對比數值大小,建議所有數值取相同有效位數,並且右對齊。

6. 分佈

分佈是指在垂直分佈、水平分佈,將元件內容按照相同間距排列。

當有相同內容≥3可考慮使用自動分佈,比如多個icon排列時,可以直接使用水平分佈。

使用自動分佈時,建議不考慮的具體間距。

在實際畫原型時,經常會將對齊與分佈一起使用。

7. 分割方式

使用分割的作用還是突出層級關係,將相同內容在視覺上分組。

分割的方法有留白分割、線性、色塊分割(也叫面性分割)。

  • 留白分割:就是我們上邊提到的“間距”,相同組的內容減少間距,不同組的內容拉大間距。
  • 分割線:使用水平線、或者垂直線進行分割,可用於模組分割、子模組分割。
  • 色塊分割(面性分割):可以理解為粗的分割線。常可用於分割不同模組。

在不同模組間我們考慮採用色塊分割。這時需要考慮不同模組分割大小的一致性。色塊間距可按照10的倍數進行設計進行設定。

色塊分割是指一種視覺效果,我們在畫原型時,並不是非要拖個矩形進行分割。

我們可以通過灰色底+白色底實現。通過顏色對比實現色塊分割的效果。

同一模組內的子模組可以考慮大間距留白,或者是分割線。使用優先順序是留白分割>分割線。畢竟畫原型時少個元素,就少些工作量。

(有分割線,放大看)

分割線粗細為1px,顏色建議使用#F2F2F2。

另外分割線樣式通欄分割線、內嵌分割線、居中分割線。我們簡單介紹下,大家瞭解即可,具體使用哪個對原型影響不大。

  • 通欄分割線:也叫全出血分割線,用於分隔完全獨立的模組。
  • 內嵌分割線:當在同一模組內的有重複的子模組內容,如圖文列表,或者是聯絡人列表時,使用內嵌分割線,分割線從文字部分開始進行對齊。
  • 居中分割線:分隔線在頁面內居中對齊。

8. 陰影

畫原型時,不建議新增陰影,太費勁。

如果你想好看,可以使用這個陰影:色號#000000,透明度20%,X:0 ,Y:1 模糊:4。

9. 圓角

在原型中,具體用圓角還是直角對原型的衝擊不大。

如果想效果更好,可以根據圓角和直角的特性來判斷:

  • 圓角:柔和、友好、識別度高,設計感強,活潑調性
  • 直角:正式、嚴肅、專業性強、衝突性強,冷系調性

推薦新增圓角,像Banner、按鈕、封面、圖片、頭像等都可以適當新增圓角。

具體圓角的大小,不需要特別嚴格,選擇元件後,通過拖動小三角標即可。

也可以按照半徑5px的倍數,根據元素面積越大,圓角半徑越大進行調整。

10. 圖示

對於icon的使用,我有以下建議:

  • 剛開始畫原型時,先不使用icon,使用文字、佔位符或者圓形代替,最終原型確定後再替換icon。
  • icon要表意清晰明確,好理解。
  • 使用多個icon時,儘量選擇風格一致的icon,如果使用線性圖示,就全部使用線性圖示。推薦使用iconfont網站、iconpark網站,iconpark可以調整icon的線段粗細、風格、顏色,但是圖示種類有限。iconfont更豐富,也支援按照不同風格篩選。
  • 使用svg向量圖,別讓icon失真。在iconfont或者iconpark中複製svg程式碼,貼上到Axure中,然後變換圖片為SVG形狀。這樣就可以修改icon顏色、調整大小也不會失真。
  • 使用icon調整大小時同比例縮放擴大,別讓iocn變形。

11. 文案

文案在畫原型時就直接敲出來了,很多時候原型中的文案會使用到線上中,我們在畫原型時,可以直接敲出好點的文案。

具體建議如下:

  • 填充的文案內容儘量貼合實際場景,並考慮使用實際內容填寫文案。對於日期時間、數字我們可以隨便敲出來,但是可別寫出“2月31日”、“17點知道77分88秒”。
  • 提示文案要簡潔精煉,字數不宜太多。
  • 語法使用動詞+名詞,如“新增使用者”“編輯資訊”,且語序要保持一致,而不是“新增使用者”“資訊編輯”。
  • 數字使用阿拉伯數字,如“3天后開啟活動”。而不是“三天後開啟活動”。
  • 別採用負面詞語,像“你沒資格參與活動”,改為“簽到完成後即可參與活動,立即簽到”。
  • 文案內容傳達積極的暗示,如“剩餘70%未學”修改為“已學完30%”。
  • 當出現報錯提示時,要讓使用者知道為什麼錯、如何解決。別彈出個“error ”。
  • 使用專業名詞要確定名詞的準確性,另外也要考慮到名詞的大小寫規範,是iOS,而不是ios。
  • 別有錯別字,如“登入”,不是“登陸”;“請稍後重試”而不是“請稍侯重試”;“請稍侯,馬上回來”而不是“請稍後,馬上回來”。
  • 提示內容句尾別加標點,“今日預約已滿,可預約明天”而不是“今日預約已滿,可預約明天。”,但是可以加表達委婉的符號,比如“~”。
  • 第二人稱可以使用“你”,而不是“您”。
  • 文案語氣可以根據場景、人群、產品調性選擇不同的語氣,如果是年輕化的產品,可以使用活潑的語氣;如果你老年人產品,語氣就正式嚴肅。

12. 圖片

畫原型時,不需要新增具體圖片,使用佔位符、或者矩形圖代替即可,如果覺得表達不清楚,可以新增文字補充。

在使用佔位符/矩形代替圖片時,我們可以直接調整一個差不多的尺寸,如果想更好點,可以按照一定比例調整。

常見的比例有:

  • 16:9,常使用於影片封面、照片封面。
  • 3:2或4:3,常用與圖片封面,圖文列表封面、banner等。畫原型時建議使用3:2,在相同寬度下,比4:3的高度更小,能留更多面積讓我們畫原型。
  • 1:1,常用於使用者頭像、商品主圖等。

13. 動效

不過過度追求動效。關於使用動效我有以下小建議:

看原型的使用物件是誰,選擇性的新增動效。

可以新增簡單的效果,如連結跳轉,隱藏/顯示,切換動態面板、垂直滾動、水平滾動。

對於頁面切換,PC端產品建議將每個頁面單獨畫出,新增連結跳轉到新頁面,有利於寫一體化需求文件。

App端頁面較少時,可直接平鋪在Axure畫布中,通過箭頭表達跳轉關係。

建議動態面板僅用於互動展示,不要在動態面板的頁面中新增需求文件說明,沒人喜歡點選你的原型去找你的需求。

當用動態面板時,建議先把動態面板的所有頁面都畫好,然後在放入動態面板內。

動態面板中儘量別在加動態面板,修改時每個人動態面板去找很費勁。

對於動態面板中的頁面進行切換時,可選擇性新增Axure自帶的切換動畫以及動效效果。效果建議選擇“緩進緩出”。

使用隱藏顯示時:最好選中:置於頂層,避免被遮擋。可選擇性新增顯示與隱藏的動效,效果可選擇“逐漸”,時間選擇300ms

對於選擇日期、選擇日期等,如果沒有好的元件,可直接使用axure自帶的文字框,修改不同型別。

對於中繼器、函式這種高階互動,不建議在畫原型時使用。其它高階動效也不建議在畫原型中使用,當然你可以自己學著玩。

03 總結

再分享一張幾年前做的會員落地頁專案的原型圖與UI圖對比照。

(最左邊是我當時領導畫的,中間的是我改的,右邊的是UI設計稿)

其它的話,就是畫原型的首要前提是需求分析完整,功能架構劃分清晰,流程確定清晰。這些我們不在這說,之後在細聊。

另外不要糾結原型工具。

原型工具有很多:Axure,sketch,摹客,墨刀、xd,即時設計、碼前、MasterGo等。另外PPT、Excel也能畫。

你工作中使用的工具、工具的版本都不是你一個人能決定的,而是看公司要求,或者是其他同事使用的什麼工具。

現在主流還是Axure,Axure的使用技巧你可以看我之前的文章:

《產品必會的30個Axure使用技巧》

《產品必會的Axure使用技巧-第二彈》

《產品必會的Axure使用技巧-第三彈》

另外一點,就是使用元件庫,頁面中的元件翻來覆去就那些,每次使用時直接拖拽元件庫即可,不用每次都畫。

我建議每個要畫原型的產品,都要有自己的元件庫。我也整理了Axure元件庫,文末提供了領取方式。

還有就是了解互動元件有哪些,以及互動設計原則。

對於原型中需要使用什麼樣式的互動元件,大家可以看下這篇文章《產品經理必會的30個元件(彙總)》 http://www.woshipm.com/pd/5423893.html

本文由 @王大鹿 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議