網站原型設計是我們在設計網頁過程中必不可少的一步，激烈的市場競爭讓我們不得不對產品進行快速迭代，如何高速有效的進行原型設計成為了設計師頭疼的問題。本文將以unsplash網站為實例，教大家快速搞定web網站原型設計。
在網站原型設計之前，我們先來了解一下unsplash，它可能是目前全世界最大的免費圖庫，使用者可以裡面免費下載海量的高畫質相片。此外，網站為開發者提供 Unsplash API 用於串接這個超大型圖庫，讓你直接取用網站資源。
網站分析
①頂部導航欄設計
我們常見的頂部導航欄設計有漢堡包菜單、文字和配色、固定型等方式。Unsplash網站採取的就是固定型導航風格，但是與傳統的固定有些許差別（Unsplash網站中，用戶在向下滑動一段距離後再固定在某一位置）。這種設計方式比較適用於頁面內容比較多，需要用戶不斷下拉滑動的網站。
②圖片排版
常見的圖片排版有相同的排布距離且相同尺寸、相同的排布距離但不同尺寸、對稱排布、菱形排布等。在Unsplash網站設計中，採用的是相同的排布距離且相同尺寸（圖片平鋪設計）。一般使用在具有相同層級關係的場合。
③行為召喚按鈕設計
行為號召（CTA）按鈕是網頁和移動用戶界面中的常見互動元素：其主要目標是誘使用戶採取某些操作，為特定頁面或屏幕呈現轉化，例如註冊，購買，聯繫 ，訂閱等。在Unsplash網站中，我們能看到大量的CTA按鈕-“立即註冊”。
原型設計技巧
先來看看Unsplash網站原型設計圖：
原型演示地址：
https://run.mockplus.cn/MKUIcI9Hl36GqiEw/index.htm...
本原型使用的是國產原型工具-Mockplus製作，使用起來，非常快速，便捷。下面一起來看看如何實現這些效果呢？
①頂部導航欄滾動停留設計
這個也是我們在淘寶中常見的一種交互方式。先來看看圖：
原型演示地址：
https://run.mockplus.cn/raYgbWVi4uo2tdTl/index.html
在Unsplash網站中，效果是類似的，在Mockplus中實現起來非常簡單，具體步驟如下：
1. 新建一個滾動區（滾動區1），在滾動區裡放“大作”、“註冊”及其上面的組件。
2. 在滾動區1裡面嵌套一個滾動區2，放“大作”、“註冊”下面的組件。
3. 回到滾動區1，點擊滾動區1“+”號，將高度調至“大作”、“註冊”正好在頂部時。
4. 將滾動區2的高度調至一定高度。
5. 退出滾動區編輯狀態，就實現該效果了，演示時注意鼠標位置，滾動“大作”、“註冊”上面時，鼠標放在上面區域，滾動下面時，鼠標放在下面區域。
②圖片排版
從上圖可以看出，除了圖片、圖像圖標、文本不一樣，佈局都是一樣，而這種重複性的佈局在Mockplus中使用“快速格子”就非常容易實現。具體操作如下：
③圖片輪播
在Mockplus中，已經
封裝好了圖片輪播組件，直接拖出上傳圖片即可。
最後安利安利20個國際精美設計規範 - UI style guide：http://t.cn/RkKAUyR 免費設計規範製作工具推薦：http://t.cn/Rew4AwE 設計師和產品經理看看咯。
閱讀更多 Mockplus摹客 的文章
