邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Thomas 2018-08-22 08:17:25 阅读:787


网站原型设计是我们在设计网页过程中必不可少的一步,激烈的市场竞争让我们不得不对产品进行快速迭代,如何高速有效的进行原型设计成为了设计师头疼的问题。本文将以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!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶