详细解析网页走出屏幕的设计体验

2016-02-16 22:51 3 1 收藏

今天图老师小编要跟大家分享详细解析网页走出屏幕的设计体验,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - 平面设计 】

O2O设计因其使用场景和方式的不同,与一般设计相比会更注重功能与时效性,需要提供简洁直观,快速响应的用户界面。

注:O2O即Online to Offline,指线上线下的电子商务,主要指在线上交易线下享受产品或服务的一种商业模式。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

近期有幸参与一些O2O项目的设计,在线下也对C(用户)及B(商家)进行了走访,引发了笔者对走出屏幕体验的一些设计思考。

QQ手机版生活优惠运营活动设计

一.前期分析

QQ手机版中的生活优惠功能是针对大众消费市场推出的优惠打折信息服务平台,主要以餐饮信息为主。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

QQ手机版生活优惠

在对整体设计进行构思前,我们先对B商家和C用户进行了简单的分析:

1. B商家

为什么B商家要做优惠?主要是两方面原因:一是吸引客源,二是更好的提供店铺内增值服务(例如会员、折扣推广等)。

为什么B商家要选择O2O营销模式?愈演愈烈的移动浪潮悄然改变着人们的生活方式,利用互联网的优势,线上营销带动线下消费,为传统行业增加价值。

通过和用研同事的线下走访,我们发现B商家线下门店的一些共通点:

1)一般都有自身优惠宣传介绍,如新品8折、优惠套餐、工作日优惠等。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

2)同类竞品物料宣传琳琅满目,如银行卡、信用卡、商圈会员卡的优惠信息等。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

基于此,线下门店物料设计要考虑的两个问题:

目标:如何吸引C用户?

环境:在人员流动频繁,环境嘈杂之下,如何让设计更高效?

2. C用户

要如何吸引用户、使设计更高效,我们从用户的角度进行了分析:

1)黄金2秒法则:在碎片式和目标性很强的户外环境中,用户一眼扫过商家海报,停留时间短短1到2秒。这就要求宣传内容要紧紧抓住用户消费的行为心理,如突出优惠字眼,几折、现价与原价的对比、满多少送多少等,同时多用美图来吸引用户眼球。

2) 品牌识别性:类似竞品宣传满天飞,如何让用户一眼扫过就知道这是QQ生活优惠的并留下品牌记忆。我们可以从物料设计的统一性入手,如宣传物料模版化,视觉风格统一,B商家和生活优惠LOGO规范化等。

3) 二维码:线上线下互动的桥梁,实际使用中常遇到扫码位置大小不合适,或二维码设计过度导致扫码失败的案例(如下图示)。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

二维码设计需要注意下面两点:

a.中国成年男性平均身高169cm,女性158cm。二维码要放置在人在常态使用手机、方便扫描的区域。

b.现有技术条件下,二维码的容错要控制在30%以内,再考虑到打印材料,户外环境光线,反光等因素,容错比例最好保证在这个之下。

3.网络状况

看到给力优惠,打开界面却永远在loading,因为网络状况而导致不能使用,这是一个让人非常扫兴的经历。如何优化避免类似情况,除了做后台性能的优化外,设计也可以从以下方面入手:

1)3G网络可优先加载文字后图片,条件允许情况下2G也可单独处理一套;

2)多用纯色和轻质感的设计手法,减少太花哨的效果,用可循环纹理等来控制切图的大小。

二.模版设计

走出屏幕看设计,对B商家、C用户和网络状况进行简单的分析后,我们对O2O的设计也有更全面和深刻的解读,除了考虑各种综合因素,我们更要抓住O2O设计核心理念直指人心。

走出屏幕再走进屏幕,设计的解读会更加的形象和立体。以下是生活优惠两个设计模版框架的输出:

1.B商家运营活动线下设计模版

主要摆放位置是商家的店门口,故需要规范整体布局,突出主优惠信息。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

2.移动端运营设计模版

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

主要考虑手机端展示位置比较小,通过主次内容的梳理来提高信息传播效率。

详细解析网页走出屏幕的设计体验,PS教程,图老师教程网

除了以上的分析,其实我们对B商家和C用户的挖掘还有待深入,还有很多点也是我们正在努力学习和改进的地方。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

做O2O项目最大的感触,我们应该走出屏幕,多去线下体验,更了解我们的商家,更了解我们的用户,更立体的解读自己设计的产品。不管是O2O,还是移动端的其他设计,我们都不仅要问什么是好的设计,更应该多站在用户的角度问问自己什么是有价值的设计。

来源:http://www.tulaoshi.com/n/20160216/1576118.html

延伸阅读
晋小彦:时代在变规则也在变,网页设计师刚入行的时候都会被告知信息内容需要摆放在800或1000的宽度以内,但是今天不论在网络速度还是硬件、显示屏都有了不同程度的更。面对伴随而来的多终端显示。如何让我们的网页有一个良好的第一视觉?如何让各类的用户特别是宽屏的用户在自己的显示器上看到完整的视觉盛宴?而非仅停留于1000宽度的切糕网页。...
设计,必须是充满诗意的。 带过五年多的用户体验设计团队,从几个人到二十几个人。以前自己也做过技术,发现工程师和设计师其实是有很多相近的地方的,那就是都有追求。 带领团队,并不是管好人就行了(所谓的行政管理),更是要实现业务的成功,给团队定目标,定追求,然后与大家一起想办法达成。这五个设计原则就是在团队日益变大,项目越来...
建筑与雕塑在光的作用下,让我们领略到了作品的神圣、结构的清晰、空间的真实 艺术摄影的炫光和强光,凸显的的是神秘、高雅与个性 广告大片中强光源对比的手法,能让模特更加立体有层次,凸显品牌的调性 光影涂鸦也被人们称为光绘画、光电涂鸦,慢慢成为流行的一种街头和时尚的艺术活动,神秘感扑面而来。 光影是网页设计中...
关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。 Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底...
随着互联网的高速发展,各种各样的网站层出不穷。在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。 作为网页设计师,我们...

经验教程

251

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部