响应式设计

网站无论是在手机上还是电脑上,无论是用鼠标还是触摸屏操作,都应当正常显示和作用。这需要响应式网页设计。让体验保持一致性,是响应式设计的原则。 这里有28个响应式 […]

2016年3月3日

网站无论是在手机上还是电脑上,无论是用鼠标还是触摸屏操作,都应当正常显示和作用。这需要响应式网页设计。让体验保持一致性,是响应式设计的原则。

这里有28个响应式设计的案例。

1,利用好空白。

01.-Vestre

Vestre 网站中文字的安排非常适宜,无论在多大的视口下,文字都显示在偏白色的背景上——当视口继续变小为移动端的时候,文字则移到图片的下方。这种设计保证了文字的阅读性。

2,Logo的位置一致性

02.-Epicurrence

Epicurrence网站将多个元素独立出来设计了视差滚动的效果。独到的是,无论视口多大,圆形的logo会一直出现在页面的右上方。

3,考虑水平和垂直布局的对比。

03.-Kerselias

横向的布局适合桌面电脑、笔记本以及其他的宽屏的设备,而垂直的布局则比较适合手机等移动设备。

Kekselias 为水平及垂直布局都做了优化,无论是用任何设备都能得到较好的信息展示效果。

4,滚动或不可滚动。

04.-Boone

Boone Selections  网站通过动效鼓励用户向下滚动网页。这种效果在桌面端比较出色,但是在移动端用户可能不太愿意滚动太多。本网站选择了一句简洁明了的公司介绍放置在移动端网页的首屏,帮助用户第一时间了解公司的业务。

5,考虑手指的大小。

05.-Rudys

对于响应式网页设计来说,需要考虑到用户可能用鼠标或者手指的触摸和网页上的按钮和链接发生交互。要像 Rudy’s Paris一样,精心考虑过的按钮的大小,让用户无论是鼠标还是手指触摸,都能够随心所欲。

6,为不同的布局做细微的调整。

06.-Uve

Uve’s网站在不同的布局下保持着统一的形象,但是具体细节上有调整。页面变窄的时候,logo和菜单按钮上移,为主题字留出了必要的空间。

7,考虑每行文字的字数

07.-The-Forecaster

虽然宽屏显示器有更大更宽的显示空间,但是最好不要无限制的延长段落的宽度。每行中保持60-75个字是最佳的选择,可以保证用户阅读的舒适性。

8,为小屏去除不必要的装饰性元素

08.-MRAssociates

只为小屏保留必要的信息及视觉元素能够保证下载的速度。MRAssociates  为小屏去掉了联系方式、分享按钮等元素,画面更简洁,也更适合手机阅读。

9,恰当地剪裁图片

09.-Dans-Mon-Sac

Dans Mon Sac网站在所有的视口尺寸下用的都是同一张图片,但是不同的视口下图片的位置被做了调整以确保和左面的文字保持相对和谐的状态。

10,专注于最重要的内容

10.-Stephen-Caver

Stephen Caver ,设计不同视口的网页的时候要对保留或去掉什么内容有整体的规划。专注于最重要的内容,并以适合阅读的形式表现出来。

Stephen Caver 网站在移动版本去掉了黑色的方块,改为链接的形式放置在页面的顶端。

11,变换栏数

11.-Design-School

The Design School by Canva    桌面端为4栏,平板端为2栏、移动版则为1栏。这保证版式清晰,文字阅读性高,链接也更容易点击。

当浏览器窗口缩放的时候栏数同时也会变化。

12,保持栏数统一

12.-ETQ
和上个案例不同,ETQ-Amsterdam  在各个大小的视口都保持了两栏的设定。这样保证了品牌形象最大限度的统一。此外由于网页中几乎没什么文字,所以并不担心栏宽变小引起的阅读性问题。
13,确定是否要动画
13.-Fivefootsix
Five Foot Six 在桌面端有动画,而移动端则变成了图片。动画需要在各个设备上运行顺利,由于尺寸及设备的限制,移动端的动画目前仍然是个麻烦。
14,考虑背景图片
14.-Edwin

同一张背景图片可能不能顺利地在各个设备上使用。

Edwin-Europe使用了两张不同的图片,一张桌面端,另一张则为移动端。将桌面大小的图片剪裁到移动端上可能并不适合。

15,决定要特写还是全景

15.-62-Models

 62Models   在移动端将图片剪裁变成特写,桌面端则留出了大量的空白。如果将特写照片用在桌面端,看上去将会有些笨重。

16,变化字体的大小

16.-Andre-do-Amaral

Andre do Amaral’ 的设计使用了大胆的纯字体的设计。因为文字是网页的主要内容,所以将字体变化大小以适应不同的设备非常重要。

17,精简文字

17.-Weblounge

Weblounge   在小屏上精简了很多内容。精简的移动端能够将最重要的信息直接体现出来。

18,变化菜单

18.-Oliver-Bolinas

Oliver Bonas 的菜单在桌面端为横向,在移动端则变成纵向。此外菜单在移动设备上并不是全时显示的。当然在字体的选择和留白的控制上,桌面端和移动端仍然保持着统一的形象。

19,保持一致性

19.-Hard-Graft
对于保持不同视口下的一致性来说,Hardgraft  是个很棒的案例。通过栏数、行宽 、菜单的设定保证了网站的一致性。
20,让标题清晰明确
20.-Urban-Influence
 Urban Influences 上所有博客的题目都能清晰的阅读,因为网页将栏数进行了适配,并且选择了无衬线的字体,使得题目非常容易被阅读。

21,保持简单

21.-Alto

Studio Alto’ 网站是个大胆的设计,将一块红色、一张黑白照片以及品牌组合形成了不同尺寸大小的网页。简单却富有表现力。

22,最小化细节

22.-My-Deejo

My Deejo 网站可以定制刀具。桌面端所有的定制选项都显示出来,但是移动端却全隐藏到了底部的菜单里。

23,使用一个具备识别性的菜单

23.-Brian-Hoff

Brian Hoff Design 的菜单在不同的视口下都保持着统一的识别性。

24,滚动或者滑动

24.-Teye-Denkwerk

Research suggests网站图集在桌面端可通过滚轮上下滑动,在移动端则可左右滑动,方便用户使用鼠标或者触摸屏操作。

25,让整个页面成为菜单

25.-Impossible-Bureau

Impossible Bureau’s 网站将首页设计成了菜单,展示了四个最重要的链接。

26,将header部分固定

26.-Nine-Sixty

将logo及菜单部分的header固定在视窗上,有助于用户快速的回到页面顶部或者查看菜单内容。

27,重新布置版面

29.-Van-Gogh

Van Gogh Museum网站在不同大小下版式也稍微不同。桌面端左右布局,平面端变成上下布局,而手机端则去掉了所有的图片。

28,避免使用很大、很复杂的图片

30.-Resn

如果你的网站不够复杂、不能为移动端适配合适的图片的话,那么干脆将他们全部去掉。这样能够保证信息更有效的传达。

 

每月甚至每周都有很多新的移动设备发布,所以设计你的网站的时候,确保在各个设备上做好足够的测试。测试是最好的设计指导。

ixd

山工艺交互设计工作室。本专业培养学生具备敏锐的洞察能力,能够发掘用户及市场的需求;严谨的调查分析能力,能够通过社会调查方法分析数字产品的用户体验及市场表现状况;优秀的设计能力,能够把握当前界面、交互设计的潮流,掌握交互设计的艺术及技术能力;良好的沟通协作能力,能够和市场、开发人员流畅、协同合作;一定的文献检索、资料查询能力,掌握初步的科学研究方法。学生不仅学习具体的交互设计方法,又能在实践练习中将理性思维和艺术设计融合为一体,成为综合性、高素质的交互设计专业人才。 作品、文章投稿以及设计事务咨询请联系 ixd@designdaily.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注