【原型实战】分分钟搞定Unsplash网站原型设计

网站原型设计是我们在设计网页过程中必不可少的一步，激烈的市场竞争让我们不得不对产品进行快速迭代，如何高速有效的进行原型设计成为了设计师头疼的问题。本文将以unsplash网站为实例，教大家快速搞定web网站原型设计。

在网站原型设计之前，我们先来了解一下unsplash，它可能是目前全世界最大的免费图库，使用者可以里面免费下载海量的高画质相片。此外，网站为开发者提供 Unsplash API 用于串接这个超大型图库，让你直接取用网站资源。

网站分析

①顶部导航栏设计

我们常见的顶部导航栏设计有汉堡包菜单、文字和配色、固定型等方式。Unsplash网站采取的就是固定型导航风格，但是与传统的固定有些许差别（Unsplash网站中，用户在向下滑动一段距离后再固定在某一位置）。这种设计方式比较适用于页面内容比较多，需要用户不断下拉滑动的网站。

②图片排版

常见的图片排版有相同的排布距离且相同尺寸、相同的排布距离但不同尺寸、对称排布、菱形排布等。在Unsplash网站设计中，采用的是相同的排布距离且相同尺寸（图片平铺设计）。一般使用在具有相同层级关系的场合。

③行为召唤按钮设计

行为号召（CTA）按钮是网页和移动用户界面中的常见互动元素：其主要目标是诱使用户采取某些操作，为特定页面或屏幕呈现转化，例如注册，购买，联系，订阅等。在Unsplash网站中，我们能看到大量的CTA按钮-“立即注册”。

原型设计技巧

先来看看Unsplash网站原型设计动图：

原型演示地址：

https://run.mockplus.cn/MKUIcI9Hl36GqiEw/index.html

本原型使用的是国产原型工具-Mockplus制作，使用起来，非常快速，便捷。下面一起来看看如何实现这些效果呢？

①顶部导航栏滚动停留设计

这个也是我们在淘宝中常见的一种交互方式。先来看看动图：

原型演示地址：

https://run.mockplus.cn/raYgbWVi4uo2tdTl/index.html

在Unsplash网站中，效果是类似的，在Mockplus中实现起来非常简单，具体步骤如下：

1. 新建一个滚动区（滚动区1），在滚动区里放“大作”、“注册”及其上面的组件。

2. 在滚动区1里面嵌套一个滚动区2，放“大作”、“注册”下面的组件。

3. 回到滚动区1，点击滚动区1“+”号，将高度调至“大作”、“注册”正好在顶部时。

4. 将滚动区2的高度调至一定高度。

5. 退出滚动区编辑状态，就实现该效果了，演示时注意鼠标位置，滚动“大作”、“注册”上面时，鼠标放在上面区域，滚动下面时，鼠标放在下面区域。

②图片排版

从上图可以看出，除了图片、图像图标、文本不一样，布局都是一样，而这种重复性的布局在Mockplus中使用“快速格子”就非常容易实现。具体操作如下：

③图片轮播

在Mockplus中，已经封装好了图片轮播组件，直接拖出上传图片即可。

结语

当你使用Mockplus后，你会发现原来网站原型设计竟是如此轻松简单。一款好用的原型工具真的能让你事倍功半。不同的设计平台都有着许多使用技巧和拓展功能，闲暇的时候稍加研究，定会让你获益匪浅。