所在位置：
首页 >
营销资讯 >
网站运营 > 【原型实战】分分钟搞定Unsplash网站原型设计
【原型实战】分分钟搞定Unsplash网站原型设计
时间：2022-08-19 01:18:02 | 来源：网站运营
时间：2022-08-19 01:18:02 来源：网站运营
网站原型设计是我们在设计网页过程中必不可少的一步，激烈的市场竞争让我们不得不对产品进行快速迭代，如何高速有效的进行原型设计成为了设计师头疼的问题。本文将以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中，已经封装好了图片轮播组件，直接拖出上传图片即可。
结语
当你使用Mockplus后，你会发现原来网站原型设计竟是如此轻松简单。一款好用的原型工具真的能让你事倍功半。不同的设计平台都有着许多使用技巧和拓展功能，闲暇的时候稍加研究，定会让你获益匪浅。
相关阅读：
12个最佳的响应式网页设计教程，轻松带你入门！ 2018年最好用的20个Bootstrap网站模板 中小企业网页设计，轻松拓展网络市场 2018最新优质电商网站模板 2018年，你不能错过的8本Web设计书籍推荐
在线咨询
