提问解答:如何优雅的设计APP页面

页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,从多个角度看问题,你才会学会成长。


页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,从多个角度看问题,你才会学会成长。

提问解答:如何优雅的设计APP页面

小密圈被封了一段时间后终于重见天日了,这篇文章就来回答小密圈里的一个提问:如何设计一个APP页面。

看到这种提问,内心一般是抗拒的,因为产品设计是一个系统工程,单独拧出来其中一个流程来讲,都是割裂的,但在实际中又必须割裂出来,因为只有割裂出每个流程,把每个流程都想通想透,才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部,系统和部件,也是一门大学问

一、明确页面设计在整个产品设计中的位置

互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期,所以前期必须去和产品经理或者用研人员反复沟通,明确产品定位、明确需求、了解业务流程,然后再梳理信息架构、产品的导航形式、任务流程和页面流。

不管产品经理还是交互或UI,都要去了解这些,并反复沟通,这是基础。所有的设计脱离了用户和需求都是耍流氓。

其实这也是我在以前文章中反复强调的,只要你从事的是产品设计的工作(目前涉及到的分工主要有产品经理、交互设计师、视觉设计师),都要从产品设计整体去思考问题,产品经理不要只想着需求,交互也不能只想着体验,视觉也不能仅仅思考美不美观,这种眼界的提升,会直接影响到设计方案。

如果你已经建立了整个产品设计的知识体系,这只是第一步,下一步你还有考虑产品运营,考虑商务、考虑资本,这些都是需要设计师去了解的。周末和朋友聊天的时候,他打了个很好的比喻,把公司比作一个人,那么不同的职位就相当于每个人的感官和外在,产品相当于一个人的大脑,视觉相当于一个人的衣品,商务相当于一个人的沟通能力…

你如果只了解人的一个部分,就永远没办法理解这个人。

我目前就在深耕产品设计的基础上,在学习产品运营的知识。

二、确定页面目的和目标

明确了页面设计的上游的流程,接下来要做的,是确定页面的目的和目标。

目的和目标是两个概念,目的是你为什么要设计这个页面,目标是设计这个页面想要达成什么。例如,电商的商品详情页目的是介绍商品、帮助用户进行购买决策,目标就是提高用户下单的转化率。

提问解答:如何优雅的设计APP页面

京东&淘宝

作为同样的商品详情页面,不同的目的和目标,直接影响到设计形式。例如京东是自营商品,用户一次性购买的越多,其客单价会更高、运营成本也会更低,所以它的商品详情页的主要目标是提高加入购物车的转化率。而淘宝作为一个平台,单独购买一件商品和一次性购买多件商品都很重要,所以它的加入购物车和立即购买的优先级是同等重要的。

记住:明确页面目的和目标,这是你设计一个页面的指导思想。

三、确定页面的来源和去处

任何单独的页面都只是用户完成某个任务的其中一环,这个页面从哪来?能去哪?影响着页面的导航设计、以及工具栏上按钮的摆放。

为了延续性,继续拿淘宝详情页来举例。

提问解答:如何优雅的设计APP页面

返回上一级

提问解答:如何优雅的设计APP页面

分享&购买

返回页面按照设计规范,基本会放在标题栏的左侧,也有一些小众APP考虑到单手操作放在页面底部,其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上,例如淘宝的客服、店铺、收藏、加入购物车、立即购买;例如资讯类APP的留言、点赞、收藏等。

在考虑页面的去处的时候,一般有二级页面的形式和临时框的形式,临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框,而没有采用二级页面,这能减少用户在完成一个任务时的跳转步骤,提高转化率。

四、确定页面内容和优先级

经过前面三个步骤,页面框架基本成型,现在就要往这个框架填充内容。根据信息架构设计,基本会确定这个页面需要包含哪些内容(关于信息架构设计,可以参考《90%的设计师都不知道的信息架构知识》)。

其次就要确定页面信息的优先级,确定优先级的判定依据就是第一步所说的当前页面的目的和目标,以及在做需求分析的时候,公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点:

①用对比的手法,明确信息层级,优先级越高信息表现越突出。例如上图格和销量字段的对比;

②优先级最高的放在用户第一眼能看到的位置(页面的第一屏)。例如将商品图片、标题、价格放在第一屏的位置,评论则放在第二屏的位置;

③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买,很弱,消息、帮助、我要反馈则更弱,所以被收起在右上角更多的icon中。

五、考虑技术的局限性

上次在做阅读APP的时候(pad平台),需要在E-Ink屏上的阅读页面增加竖屏模式,这种模式会更利于用户进行阅读的,类似于kindle的阅读体验。但是因为下屏没有做G-senser,所以是不支持竖屏的,只好放弃。如果我实现不去了解这点,做出来的方案只是浪费时间。

现实做设计的过程中还有很多类似的例子,不管是交互还是视觉,总是会想到一些创新好玩的设计形式,每当这个时候一定要去和相关技术人员沟通,确保设计方案的可行性。此外还要考虑项目周期,如果上线时间紧迫,其实是不允许设计师把设计形式做得很重的,只需要出一个简单的保底方案即可。

我自己就有在做设计之前和相关技术沟通想法的习惯,真的帮助很大。

还是文章前面的那句话,页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,这样你永远是个美工,而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人,而不是简单画图的人。

 

题图来自 Pexels ,基于 CC0 协议

#专栏作家#

邹志楠,微信公众号:邹志楠,人人都是产品经理专栏作家。用户体验设计师,专注于互联网产品设计。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/34001/

(0)
CatherineCatherine
上一篇 2017-06-07 11:50
下一篇 2017-06-08 08:11

相关推荐

  • 浅谈WEB页面三种程度的提示弹窗

    在设计WEB页面时,经常会使用到弹窗提示,根据提示的深度层次,大致可分为三种,接下来介绍一下三种程度的弹窗样式与进阶样式。

    2017-05-29
  • 按钮的优先级选取与用户体验最佳实践

    通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“OK”或者“确定”要更好。
    尽可能使用动词,而不是OK,因为前者意义会更明确,用户不会断章取义从而作出错误的选择。

    OK/[Do it]/Yes
    [Don’t do it]/No
    Cancel

    2017-05-23
  • 搜狗词典用户体验更给力 可原汁原味学英语

    日前,搜狗词典APP迎来重要升级,接入上百部与查询词相关的优质英美影视剧内容,并将“国际报道”内容板块升级为“双语报道”,进一步丰富了英语单词的学习语境,提升了用户的查词、记词体验,帮助用户原汁原味学英语。接入海量英美影视剧内容,新增“原声影视”内容板块及“视频单词卡片”功能,是搜狗词典APP此次升级中值得称道的一大亮点,这使得搜狗词典APP突破了原有的文字、图片、音频等内容形式,方便用户通过丰富的影视剧短片,用更具趣味的方式了解学习英...

    2018-03-12
  • UI设计中下拉刷新有什么讲究?

    最早的下拉刷新 设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新 的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

    2017-05-16
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10
  • 2018’IIDC信息与交互设计教学研修班开始报名了!

    点击信息与交互设计关注我们!资深教授的专业教学指导+行业专家的实际案例分享力求打造最有深度的课程培训5.10-5.12信息与交互设计专业委员会联合广州美术学院定于5月10日~12日在广州美术学院举办"信息与交互设计教学研修班"。本次研修班将特别邀请清华大学美术学院基础部主任、国家社科基金重大项目首席专家邱松教授就国家社科基金项目申报工作进行详细的解析与交流,同时邀请广州美术学院工业设计学院院长陈江教授;武汉理工大学艺术与设计学院副院长方...

    2018-04-20
  • 案例分析|上传作品时,设计师也要包装一下

    前几天看见我的第一个铁粉——佳佳在站酷网站上传了她的首发作品,虽然对于首发作品来说还算不错,但我是还是为她着急,为啥呢?因为缺乏包装的技巧!所以,我单独写一篇自己的感受和建议。

    2017-04-30
  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05
  • 为什么交互设计师总觉得自己的方案不完美?

    最近和一个交互设计师闲聊,聊到了关于对自己设计产出物的满意度问题,感触颇深,专门整理了一下分享给大家。

    2017-04-29
  • 用户体验要素

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HaloBeyoncé - I Am...Sasha Fierce用户体验为什么如此重要说到我们所使用的那些产品和服务,我们对它们的感情可谓是爱恨交加,它时而令我们备受鼓舞,时而令我们感到泪丧,它使生活变得简单,又使生活变得复杂,它使我们变得疏远,又使我们更加亲近,即使这样,我们还是不得不每天都和不计其数的产品和服务打交道,当产品满足了人们的需要时,它的制造者应该备受赞扬,反正,...

    2018-03-24