订阅摹客文章

免费获取优质的设计资讯!

文章分类
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 【原型实战】分分钟搞定Unsplash网站原型设计

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

Thomas
2018-08-22
79725


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

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

Unsplash官网

Unsplash官网原型

网站分析

①顶部导航栏设计

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


②图片排版

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

③行为召唤按钮设计

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

原型设计技巧

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

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. 退出滚动区编辑状态,就实现该效果了,演示时注意鼠标位置,滚动“大作”、“注册”上面时,鼠标放在上面区域,滚动下面时,鼠标放在下面区域。

②图片排版

Unsplash图片排版

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

Unsplash重复布局设计

③图片轮播

图片轮播

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

结语

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


【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~


Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019
激活数量:限量150个。
有效期:2019年1月31日。
激活地址:https://www.mockplus.cn/user/upgrade


上一篇
超实用的App原型设计工具入门指南,初学者必看!!!

Narajia   08/23

快速原型设计工具—你所不知道的快速技能

Anne   08/21

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com