如何解决响应式设计的错误?

响应式设计是一个痛苦的学习,但它是一个学习的一个重要的部分。我们不再陷入Web 2.0,桌面空间有限。我们现在是屏幕上 - 争先恐后地购买,构建和随处学习。

在之前设计中,我们犯了一些错误,学习了响应式设计的细微差别。因此,与其看着你反复碰撞失败 - 我们想分享一些犯过的错误以及修复它们的简单解决方案。


副本太难读了

令人惊讶的是,能够轻松地做出一些简单的大小错误,将一个曾经漂亮的网站(或Web应用程序)变成一个微观的或庞大的版本。

根据无数变量,按钮,标题和副本可能很容易偏斜。因此,在您调整大小时请记住以下几点:

1.什么是重要的?

如果您正在设计一个可以获取(或将获得)大量流量的博客,则标题和副本必须清晰易读。不要太大,也不要太小,否则用户会没完没了地滚动或者需要放大镜。

同样,如果你是为电子商务网站设计,确保产品,在大多数情况下,价格很容易消化。如果其中任何一个到处都是,你就会产生摩擦,这会无意中影响销售。没有人想找到他们喜欢的东西(也会为了钱而放弃),只是意识到他们看不到价格,或者在媒体查询中发现“添加篮子”按钮消失了。


“响应式设计时,测试和镜像是绝对必要的。”


2.按钮和号召性用语(CTA)

用户从手机和平板电脑购买并采取行动时,响应式设计需要反映页面和网站目标。这可能会非常困难,因为有巨大的用户CTAs,使一个干净的用户体验之间的界限。

如果某些东西在桌面上运行但响应不快,不要害怕稍微偏离线框。毕竟,更重要的是实现这些目标,而不是确保它们全都挤在一起。

解决方案:

响应式设计时,测试和镜像是绝对必要的。不要认为只是因为Photoshop,Illustrator或Sketch中的某些东西看起来不错,因此它在响应式设备上看起来会很棒。不要依赖你的设计,直到你测试它们为止。“在你测试它们之前,不要重视你的设计。”


页面加载时间过长

大的图像和视频会减慢网站速度。

这就成为移动设备上使用的一个问题。如果您的响应设计不必要的图像/视频重,那么您将需要用户提交更多的数据(和时间)来查看您的站点。

需记住的一点是::用户在移动浏览时需要方便。如果网站速度很慢,那么就像在桌面上一样,用户将会离开。

不管怎样,这会给开发者和营销人员带来无数的问题,所以最好避免创建“慢速设计”。

解决方案:

同样,这相当依赖于您网站上的重要内容。删除不必要的图片或视频,这些图片或视频在响应式网站上不会增值。

ZenDesk在这方面做得很好。他们的桌面网站拥有引人入胜的首页动画,它并不存在于他们的移动网站上,但它也不会降低页面的核心价值。

问你自己:

1. 这个网站的目的是什么?目标是什么?

2.将额外的图像真的是必要的吗?


设计杀死了功能

这个错误让我们感到畏缩。通过响应式设计失去功能是一个巨大的损失。客户和用户不会在短时间内原谅你。会激怒用户。

1. 对您的桌面网站有很深的印象,然后讨厌您的移动网站上的功能丧失。

2.成为网站新用户,注意设备上的功能很差,然后永远不会回来(他们甚至可能会告诉他们的朋友)

一个例子:移动的夹点和变焦功能的丢失。在桌面上,您可以放大信息,轻松调整文本大小,并找到可读性良好的媒介。对于视力不好的人,或者那些渴望看一些小信息,一捏和缩放功能的缺失是真正的扫兴的事。


解决方法:

不要将这样的功能留给开发人员。如果你是一个文本沉重的网站,或者你知道你的设计将会触及一个功能是关键的观众,哪怕就包括一个明显的屏幕或者一个原型。

除非你把你的想法放在某个人面前,否则他们仍然是你的想法。人们不是心灵的读者。

你不了解我们的用户

不要以为开发人员可以选择通用的响应式设计并创建解决方案。 这不公平。

这就是为什么我们需要考虑谁使用我们的设计以及何时何地使用我们的设计。

这就是角色营销派上用场的地方。如果您手边没有营销人员或营销部门,那么创建一个简短的人物角色文档可以帮助您解决设计工作中的一些麻烦问题。

 “作为设计师,我们需要考虑谁在使用我们的设计以及何时,何地以及如何。”


创建角色时要包含的信息:

姓名:总是给人物角色名称(例如“设计师chen”) - 这使得该过程更具人性化

图像:面部使过程更简单,更个性化

职业:这个人为了谋生而做些什么?不同的职业喜欢不同的设备。

位置:如果主要用户群位于中国西,他们可能会使用与别国人不同的设备

浏览习惯:他们浏览的方式和位置?他们是否可能在沙发上放置平板电脑或放在桌上的笔记本电脑上?

目标:他们的目标是什么,他们将如何努力实现目标?

挑战:他们在生活中面临哪些挑战?他们将如何努力解决这些挑战?

解决方案:

使用角色营销来了解有关最终用户的更多信息。你知道的越多,决定哪个响应式设计变化就越容易。它也将帮助您超越“一刀切”的响应式设计障碍。

  “一丝不苟的思考过程会带来极佳的响应设计。”

小贴士

如果你只从本文中拿掉一件东西,确保它是这样的:你需要考虑你的设计。

现在,我们通常不会推荐任何东西。但通过设计工作,细致的思考过程可以带来极具响应能力的设计。

原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容