【原型實(shí)戰(zhàn)】分分鐘搞定Unsplash網(wǎng)站原型設(shè)計(jì)

時(shí)間：2022-08-19 01:18:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-19 01:18:02 來源：網(wǎng)站運(yùn)營

網(wǎng)站原型設(shè)計(jì)是我們在設(shè)計(jì)網(wǎng)頁過程中必不可少的一步，激烈的市場競爭讓我們不得不對產(chǎn)品進(jìn)行快速迭代，如何高速有效的進(jìn)行原型設(shè)計(jì)成為了設(shè)計(jì)師頭疼的問題。本文將以unsplash網(wǎng)站為實(shí)例，教大家快速搞定web網(wǎng)站原型設(shè)計(jì)。




在網(wǎng)站原型設(shè)計(jì)之前，我們先來了解一下unsplash，它可能是目前全世界最大的免費(fèi)圖庫，使用者可以里面免費(fèi)下載海量的高畫質(zhì)相片。此外，網(wǎng)站為開發(fā)者提供 Unsplash API 用于串接這個(gè)超大型圖庫，讓你直接取用網(wǎng)站資源。

網(wǎng)站分析

①頂部導(dǎo)航欄設(shè)計(jì)

我們常見的頂部導(dǎo)航欄設(shè)計(jì)有漢堡包菜單、文字和配色、固定型等方式。Unsplash網(wǎng)站采取的就是固定型導(dǎo)航風(fēng)格，但是與傳統(tǒng)的固定有些許差別（Unsplash網(wǎng)站中，用戶在向下滑動(dòng)一段距離后再固定在某一位置）。這種設(shè)計(jì)方式比較適用于頁面內(nèi)容比較多，需要用戶不斷下拉滑動(dòng)的網(wǎng)站。




②圖片排版

常見的圖片排版有相同的排布距離且相同尺寸、相同的排布距離但不同尺寸、對稱排布、菱形排布等。在Unsplash網(wǎng)站設(shè)計(jì)中，采用的是相同的排布距離且相同尺寸（圖片平鋪設(shè)計(jì)）。一般使用在具有相同層級關(guān)系的場合。




③行為召喚按鈕設(shè)計(jì)

行為號(hào)召（CTA）按鈕是網(wǎng)頁和移動(dòng)用戶界面中的常見互動(dòng)元素：其主要目標(biāo)是誘使用戶采取某些操作，為特定頁面或屏幕呈現(xiàn)轉(zhuǎn)化，例如注冊，購買，聯(lián)系 ，訂閱等。在Unsplash網(wǎng)站中，我們能看到大量的CTA按鈕-“立即注冊”。

原型設(shè)計(jì)技巧

先來看看Unsplash網(wǎng)站原型設(shè)計(jì)動(dòng)圖：

原型演示地址：https://run.mockplus.cn/MKUIcI9Hl36GqiEw/index.htm...

本原型使用的是國產(chǎn)原型工具-Mockplus制作，使用起來，非?？焖伲憬?。下面一起來看看如何實(shí)現(xiàn)這些效果呢？




①頂部導(dǎo)航欄滾動(dòng)停留設(shè)計(jì)

這個(gè)也是我們在淘寶中常見的一種交互方式。先來看看動(dòng)圖：

原型演示地址：https://run.mockplus.cn/raYgbWVi4uo2tdTl/index.html

在Unsplash網(wǎng)站中，效果是類似的，在Mockplus中實(shí)現(xiàn)起來非常簡單，具體步驟如下：

1. 新建一個(gè)滾動(dòng)區(qū)（滾動(dòng)區(qū)1），在滾動(dòng)區(qū)里放“大作”、“注冊”及其上面的組件。

2. 在滾動(dòng)區(qū)1里面嵌套一個(gè)滾動(dòng)區(qū)2，放“大作”、“注冊”下面的組件。

3. 回到滾動(dòng)區(qū)1，點(diǎn)擊滾動(dòng)區(qū)1“+”號(hào)，將高度調(diào)至“大作”、“注冊”正好在頂部時(shí)。

4. 將滾動(dòng)區(qū)2的高度調(diào)至一定高度。

5. 退出滾動(dòng)區(qū)編輯狀態(tài)，就實(shí)現(xiàn)該效果了，演示時(shí)注意鼠標(biāo)位置，滾動(dòng)“大作”、“注冊”上面時(shí)，鼠標(biāo)放在上面區(qū)域，滾動(dòng)下面時(shí)，鼠標(biāo)放在下面區(qū)域。




②圖片排版

從上圖可以看出，除了圖片、圖像圖標(biāo)、文本不一樣，布局都是一樣，而這種重復(fù)性的布局在Mockplus中使用“快速格子”就非常容易實(shí)現(xiàn)。具體操作如下：




③圖片輪播

在Mockplus中，已經(jīng)封裝好了圖片輪播組件，直接拖出上傳圖片即可。

結(jié)語

當(dāng)你使用Mockplus后，你會(huì)發(fā)現(xiàn)原來網(wǎng)站原型設(shè)計(jì)竟是如此輕松簡單。一款好用的原型工具真的能讓你事倍功半。不同的設(shè)計(jì)平臺(tái)都有著許多使用技巧和拓展功能，閑暇的時(shí)候稍加研究，定會(huì)讓你獲益匪淺。

相關(guān)閱讀：

12個(gè)最佳的響應(yīng)式網(wǎng)頁設(shè)計(jì)教程，輕松帶你入門！

2018年最好用的20個(gè)Bootstrap網(wǎng)站模板

中小企業(yè)網(wǎng)頁設(shè)計(jì)，輕松拓展網(wǎng)絡(luò)市場

2018最新優(yōu)質(zhì)電商網(wǎng)站模板

2018年，你不能錯(cuò)過的8本W(wǎng)eb設(shè)計(jì)書籍推薦

---