網(wǎng)頁設(shè)計(jì)原型圖 界面原創(chuàng)設(shè)計(jì)基地 企業(yè)建站實(shí)戰(zhàn)案例

時(shí)間：2023-10-03 20:36:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-03 20:36:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁設(shè)計(jì)原型圖 界面原創(chuàng)設(shè)計(jì)基地 企業(yè)建站實(shí)戰(zhàn)案例：說起原型圖設(shè)計(jì)其實(shí)大家并不陌生，對(duì)于BAT公司來說，這是一道必須上的菜。因?yàn)楫a(chǎn)品設(shè)計(jì)經(jīng)過原型圖來梳理產(chǎn)品需求、內(nèi)容完整性和可行性、頁面邏輯關(guān)系及交互關(guān)系之后，再進(jìn)入視覺設(shè)計(jì)環(huán)節(jié)，會(huì)大大降低項(xiàng)目設(shè)計(jì)的風(fēng)險(xiǎn)，也能提升產(chǎn)品用戶體驗(yàn)。今天我們素馬分享一個(gè)首頁采用單屏布局的高保真原型圖設(shè)計(jì)作品。

什么是原型圖
-





原型圖可分為手繪線稿圖、中保真原型圖以及高保真原型圖。

手繪線稿圖，如圖示






中保真原型圖設(shè)計(jì)，如圖示





從上面的效果圖可以看出，其實(shí)中保真和高保真有相似之處，就是通過效果圖都能清楚知道，界面中有哪些內(nèi)容板塊以及內(nèi)容的主次關(guān)系。只不過是高保真效果圖的精密度更加高，設(shè)計(jì)的樣式更加接近設(shè)計(jì)稿。





優(yōu)秀的高保真原型圖可以做到1像素不偏差。

原型圖的優(yōu)勢(shì)
-

那么，我們?cè)诮o企業(yè)做官網(wǎng)設(shè)計(jì)時(shí)，借鑒BAT公司（B=Baidu=百度，A=Alibaba阿里巴巴，T=Tencent騰訊）開發(fā)產(chǎn)品流程的優(yōu)勢(shì)，同樣可以引進(jìn)原型圖設(shè)計(jì)這個(gè)技術(shù)和環(huán)節(jié)。讓網(wǎng)頁設(shè)計(jì)的方向更加可控。企業(yè)官網(wǎng)設(shè)計(jì)最大的風(fēng)險(xiǎn)就是，老板只給方向和感覺，比如我想要一個(gè)高大上的官網(wǎng)，卻不知道如何落地，這時(shí)把所有的任務(wù)都拋給了設(shè)計(jì)公司，而設(shè)計(jì)公司沒有辦法化解目標(biāo)的話，只能是一版又一版的出設(shè)計(jì)稿，出到跟“老板感覺”沾邊后，再反復(fù)調(diào)整到“中標(biāo)”為止。

素馬設(shè)計(jì)給企業(yè)提供官網(wǎng)定制設(shè)計(jì)，總結(jié)出了一套創(chuàng)意落地行之有效的方式方法——?jiǎng)?chuàng)意通過是視覺端呈現(xiàn)出來，一定離不開版式和圖像（包含文字、圖片、視頻、圖標(biāo)、插圖設(shè)計(jì)等等），以及網(wǎng)頁本身的交互動(dòng)效設(shè)計(jì)的結(jié)合。既然如此，那么版式落地就更加需要原型圖設(shè)計(jì)這個(gè)環(huán)節(jié)來把控。提前把內(nèi)容可能呈現(xiàn)的形態(tài)和體量（網(wǎng)站文字及圖片的量），通過原型圖設(shè)計(jì)來梳理和確定下來，最后再把具體的風(fēng)格樣式交給視覺設(shè)計(jì)師去完成，避免了大量的由于內(nèi)容不準(zhǔn)確而反復(fù)修改風(fēng)格樣式的多余嘗試。

使用什么軟件繪制原型圖
-

原型圖的設(shè)計(jì)有很多可用的設(shè)計(jì)軟件，目前我們素馬用的是Axure RP 9的版本（目前為最高的版本)。熟悉這個(gè)軟件的同學(xué)應(yīng)該知道，這個(gè)是一個(gè)很強(qiáng)大的網(wǎng)頁設(shè)計(jì)軟件，除了圖像處理之外已經(jīng)可以把整站設(shè)計(jì)出來。

原型圖的繪制方法
-

原型圖的主要用途是用于完整的描述網(wǎng)站每一個(gè)頁面需要展示的內(nèi)容、以及展現(xiàn)網(wǎng)站欄目頁面之間的邏輯關(guān)系，部分大型項(xiàng)目還會(huì)通過原型圖把交互設(shè)計(jì)的方式都表現(xiàn)出來，讓整個(gè)產(chǎn)品幾乎就是一個(gè)穿著灰色盔甲就上戰(zhàn)場(chǎng)的士兵，活生生的，完整無缺的。


明白了原型圖的用途后，那么怎么繪制原型圖會(huì)顯得更加有品質(zhì)一些呢？

首先，把一些欄目或模塊組件化（母版）。比如頁頭（Header）， 頁尾（Footer），浮動(dòng)工具(Float Action Button)等，都是共用的。這一部分要繪制成母版，每一個(gè)頁面都會(huì)用到。

其次，注意每一個(gè)板塊的占比。通常一個(gè)板塊不要超過2屏的高度，否則看起來會(huì)很怪異。雖然不是設(shè)計(jì)稿，但是也要考慮客戶審核網(wǎng)頁內(nèi)容時(shí)的感受。

最后，就是注意對(duì)齊的關(guān)系。其實(shí)原型圖不需要太多的設(shè)計(jì)樣式的。只需要把內(nèi)容有效的、完整的排版出來，讓客戶去審核內(nèi)容準(zhǔn)確性就可以了。而對(duì)齊關(guān)系，往往跟后期的設(shè)計(jì)版式有很大的關(guān)系。這里推薦大家節(jié)用柵格系統(tǒng)來布局。

柵格系統(tǒng)（又稱網(wǎng)格系統(tǒng)grid systems）運(yùn)用固定的格子設(shè)計(jì)版面布局，其風(fēng)格工整簡(jiǎn)潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。
高保真原型圖案例講解
-






首屏中，除了header之外，我們可以看到main content區(qū)域的左側(cè)氛圍，slogan廣告語、描述、召喚按鈕三個(gè)部分，右側(cè)主要就是內(nèi)容展示的交互方式。通過圓形的切換，不斷的更新不同的案例（或產(chǎn)品），并且在屏幕左側(cè)能看到上一個(gè)切換過的產(chǎn)品的部分特征，保留一絲神秘感。其中，slogan等與logo對(duì)齊。左側(cè)的sns與折疊菜單對(duì)齊。slogan主要位于整個(gè)拌面的垂直中間處。盡量保持整體內(nèi)容周邊的空隙是一致的，整個(gè)版面看起來是平衡的。