作为第一个接触小程序的设计师,是什么样的体验?

自选股小程序已经上线,作为项目的一员,做了一下交互体验和视觉设计的总结。


自选股小程序已经上线,作为项目的一员,做了一下交互体验和视觉设计的总结。

作为第一个接触小程序的设计师,是什么样的体验?

我们很幸运能够第一批加入微信小程序内测的团队,并深刻的感受到微信开平童鞋快速的颠覆自我的能力,同时也开始了自选股小程序界面重塑再造、快速拥抱变化的新历程。作为内测团队中最重量级的小程序-自选股的设计师,和大家分享一下整个项目的设计心得体会。

设计定位

大家都知道小程序是“即搜即用,用完即走”,从它的整个定位我们可以了解到是小程序更适合那些轻量级的工具型应用。自选股本身不是轻量级产品,也希望能够在微信上搭建一个小程序的话,则更需要简洁、轻便的设计定位。

作为第一个接触小程序的设计师,是什么样的体验?

作为第一个接触小程序的设计师,是什么样的体验?

作为第一个接触小程序的设计师,是什么样的体验?

作为第一个接触小程序的设计师,是什么样的体验?

自选股小程序结合微信的设计规范以及自选股app的品牌特色,针对自选股微信小程序简洁、轻便的设计定位,进行了核心功能界面设计的创新再造。整个界面都采用线性设计,避免图的带入,整个包下来不到1mb。我们所追求的就是”快”.

交互设计&视觉设计

这个项目的视觉设计开始实现是有难处的。我们帮助微信团队一起搭建了一部分重要框架,我们是微信小程序最忠实的“测试小分队”。初期交互设计稿是没有的,设计师只能快速摸索产品的手稿进行设计。

这个项目涉及到的内容特别多,一是人太多,有微信的前端童鞋、自选股客户端童鞋等等,太多的底层框架还不能支持,只能在初稿的基础上不断优化;二是涉及功能太多,细节太多,时间太过紧急,所有视觉设计稿都是出自于下面的多张手稿,出图的效率必须又高又快,不然跟不上开发和产品的需求。往往刚调好的一个页面可能又需要再重新调整高度和蜡烛图的数量等等,不过整体的效率还是大大得到了提高。

作为第一个接触小程序的设计师,是什么样的体验?

后来我们有了微信团队的交互规范,我再根据他们的规范来调整自选股的界面设计。

1. 交互设计

微信一直都是极简设计,给用户带来最棒的设计体验,同时也给出了一系列的UI设计规范,简单举几个栗子。

  • 一个页面只有一个重点,不干扰用户的目标
  • 一次只做一件事,不打断用户的操作流程
  • 简单且一致的导航,让用户来去自如
  • 注重异常状态,让用户有路可退
  • ……

下面说一下小程序个人认为比较重要的交互设计

(1)所有页面层级不能超过5层

一进入小程序就是第一层,往后依次类推,到第5层以后无法再进入第6层。主要还是微信在性能上的考虑,不考虑5层以上的操作。倒也可以用redirect的方式去规避。

作为第一个接触小程序的设计师,是什么样的体验?

(2)顶部navigation bar上的icon无法自定义

自选股app右上角有很常用的刷新、搜索按钮,但是小程序顶部只能够放置微信框架下的“返回”“x”和“…”,甚至目前”…”里面的操作也不能自定义.所以我们采用顶部搜索bar的形式替代了搜索icon,下拉刷新替代了左上角刷新icon。

作为第一个接触小程序的设计师,是什么样的体验?

自选股app

作为第一个接触小程序的设计师,是什么样的体验?

微信框架

作为第一个接触小程序的设计师,是什么样的体验?

自选股小程序

(3)暂时不支持多点手势(如左滑),可使用长按删除

左划删除为JS模拟生成暂不支持原生操作,体验起来不是很顺畅,所以建议采用长按方式去替代左划删除操作。

作为第一个接触小程序的设计师,是什么样的体验?

(4) 一个页面不能超过4个Tab

为确保点击区域,顶部tab项不得超过4项。一个页面也不应出现一组以上的tab栏。

作为第一个接触小程序的设计师,是什么样的体验?

自选股行情tab

(5)左右滑动切换

页面的过长时间的等待会引起用户的不良情绪,微信尽最大努力减少等待时间。

(6)不支持顶部悬浮导航

(7) 支持图片(相册、拍照)、音频(录音、播放)、视频(拍摄、本地选择)、位置(GPS位置、微信内置地图坐标、)

(8)加载反馈注意事项

  • 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
  • 载入过程中,应保持动画效果
  • 不要在同一个页面同时使用超过1个加载动画。

2. 视觉设计上鼓励差异化

每个小程序可以按照自身的品牌特色进行视觉设计,形成自己的小程序风格。自选股小程序沿用了自选股app黑色设计风格,icon重新设计并风格一致化。

(1)字体设计

字体和字号按照微信所给的规范以及自选股根据自身特色所总结的设计规范进行统一设计,保证界面以最清晰的状态呈现给用户。

作为第一个接触小程序的设计师,是什么样的体验?

(2)配色设计

主内容 white 白色,次要内容 Grey 灰色,Blue 蓝色为辅色,并且蓝色为完成字样色,红色为出错用色。其中最重要的红绿色进行了色盲区分,让色盲人士看股票再也不是难事。

作为第一个接触小程序的设计师,是什么样的体验?

(3)按钮设计

自选股按钮的设计上按照微信所给的规范进行了再设计。按钮高度为44px下使用,颜色#3083e3 / #d45c25/#565b5e,字号为18pt。在可点状态下文字调整透明度为60%,但在不可点状态下文字调整透明度为30%。

作为第一个接触小程序的设计师,是什么样的体验?

作为第一个接触小程序的设计师,是什么样的体验?

(4)Icon设计

为了风格一致化,我将小程序的icon重新统一进行了设计。线性的图标更加体现小程序“轻、快”的设计理念。Icon以“点击蓝”和“状态灰”为主以及各家银行icon的统一规划。

作为第一个接触小程序的设计师,是什么样的体验?

(5)界面适配

ui需要整体等比缩放,以适合安卓与IOS手机。甚至我们还实现了自选股微信小程序在iOS和Android双平台的等比例完美适配,有一个适配套用公式就是所要适配的设计元素实际(宽度、长度)/设计稿子尺寸的实际(宽度、长度)*所要适配手机的实际(宽度、长度),一套代码两端复用。

(6)tab设计

Tab栏选中态默为100%色,未选中态带有60%。保持Tab的可用性、可视性和可操作性。

作为第一个接触小程序的设计师,是什么样的体验?

规范和整理

设计稿变更快的真是拦都拦不住,为了保证大家能够快速共享到设计稿的资源,我们封闭2个月期间使用Trello快速同步所有的设计变更,真的又快又有效。

作为第一个接触小程序的设计师,是什么样的体验?

作为第一个接触小程序的设计师,是什么样的体验?

对整个小程序的页面设计以及规范进行了总结,同时也帮助开发同学后期的校对工作以及页面的查找。一套UI会不断重组到6套个股底层页的模板重新搭建,10个大功能主页面、16个主功能特性,46个需求细分特性,在短短几个月的时间不断地调整,不断地颠覆,不断地“重生再造”。

作为第一个接触小程序的设计师,是什么样的体验?

总结

最后很开心能和自选股小分队一起把小程序一点点实现起来,也特别感谢微信团队的支持。在做自选股小程序我们不断快速的调整,不断地打磨细节,也得到了微信团队的一致好评,希望能给大家带来一款好用的炒股产品。

 

来源:腾讯NDC

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

(0)
CatherineCatherine
上一篇 2017-05-08 21:58
下一篇 2017-05-09 00:03

相关推荐

  • Day 5 | 关于 [交互设计] 的一些思考

    你知道坚持做一件事的动力是什么吗?除去喜欢,那应该就是大家的反馈与交流。我不会分享干货,也没有能力分享干货,只是觉得有一个平台能够表达自己的思考与想法,并能够和大家交流,这样成长很快不是吗?坚持了几天写完个人思考的文章后,收到很多回复,特别感动的就是收到特别认真的回复hhh,比如:有人问了我一句:交互设计是做什么的呀?其实这个时候自己脑子里飘过很多词,什么用户体验,用户研究啊,UX,UED啊,使用流程啊,人机交互啊,操作逻辑啊等等,就是...

    2018-04-26
  • UED沉思录

    Q:设计前期至输出时常见问题及解决思路以下分享,全是血淋淋的教训积累与总结。当然也是这段时间在AJK优秀Leader的带领下成长出来的。Q:设计师存在的表象问题?设计方案缺乏理论系统化因需求而丧失设计原则页面结构较为混乱,映射设计思路不清晰页面设计细节打磨程度较低页面制作时参数命名不严谨输出适配的兼容欠考虑Q:设计的根本目的是什么?解决问题Q:设计需要具备哪些能力?洞察力「发现身边的好设计」分析力「分析需求、解决痛点的思路」匠人精神「设...

    2018-03-15
  • 腾讯设计通道晋升的过程

    作者:干货君@干货札记   本人有幸能有机会作为通道助理观摩了腾讯2016年上半年D族交互通道晋升的过程,受益匪浅。 注:D族通道是指“Tencent Design腾讯设计通道”,设计通道成立于2006年,隶属于腾讯职业发展通道设…

    交互专题 2017-08-15
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 从音乐属性改进用户体验,QQ音乐和虾米音乐如何再优化?

    本文将抛开市场占有率,将腾讯的QQ音乐与阿里的虾米音乐作对比,从音乐的本身属性和对人心理的影响出发,分析用户需求,对产品提出用户体验方面的优化建议。

    2017-05-18
  • 用户体验提升才是“蔚来”

    nEqual 是业界领先的赋能“智慧商业”的数据智能技术提供商,是精硕科技集团下专注数据技术的事业部。nEqual以数据和技术为支撑,为企业实现营销自动化、智能新零售、AI人工智能等“智慧商业”模式打造和运营,帮助企业提升营销体验、销售体验及服务体验等全面的超级用户体验,进而助力企业构建可持续发展的商业竞争力。近年来,人工智能迅速占领大家视野,虽然业界已经探索了几十年,但近五年来才开始飞速发展,这得益于数据和技术的进步。近日,朋友圈被蔚...

    2018-01-30
  • 房屋建造实例映射出的用户体验原则

    来源:摩客专访(公众号)翻译:Tangerine设计构架如何在创造吸引人的应用程序时产生更好的情感影响?设计理念并不是某一领域—专门为某个具有一定需求的人群提供解决方案的专业人士独有的。我们在任何地方都能看到设计,但我们总是把注意力集中在某些我们觉得有需求的领域。在过去的几年里,我一直担任一名用户体验设计师。而我从来没想过类似这样的话题,直到最近我住进一家旅店。房子是如何建造的房屋是我们的基本需求之一。我们根据我们的需求以及预算来建造房...

    2018-03-12
  • 交互设计师应该了解的心理学理论:认知心理学、格式塔心理学和心流

    问:贴满一张卡需要多久,A和B是否相同?答案当然是不同,尽管同样需要买10杯咖啡,但往往B方案会更快地贴满。

    2017-05-20
  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27
  • 【干货】2014年微博话题年终盘点

    阿西导读:对于交互设计师来说,需要掌握很多信息。以免在自己的产品设计中让用户感觉落伍,适时添加一些热词的交互会提升产品体验,下面来瞅一瞅最火的话题先 。 本报告在进行2014年话题盘点时,以专题形式进行。…

    2015-01-20