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

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

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

在网站原型设计之前,我们先来了解一下大作,它是一款国产的免费图库网站,使用者可以里面免费下载海量的高画质图片。

Unsplash官网

Unsplash官网原型

网站分析

①顶部导航栏设计

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

②图片排版

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

③行为召唤按钮设计

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

原型设计技巧

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

Unsplash网站原型

原型演示地址:

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

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

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

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

滚动停留原型交互

原型演示地址:

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

在大作网站中,效果是类似的,在Mockplus中实现起来非常简单,具体步骤如下:

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

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

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

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

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

②图片排版

Unsplash图片排版

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

Unsplash重复布局设计

③图片轮播

图片轮播

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

结语

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

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表