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

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


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

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

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

设计定位

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

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

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

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

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

自选股小程序结合微信的设计规范以及自选股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

相关推荐

  • 从可用到易用的一次思考|手机获取验证码那点体验

    我们做用户体验的不能将系统过失/产品过失迁就于我们的用户。因为用户永远不会错,用户也没有必要为产品和过失负责。我们要做的就是穷尽我们解决问题的能力帮助用户获得最佳的使用操作,并能带来一丝的惊喜。

    2017-05-17
  • 双管齐下:同时设计 iOS 和 Android

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。 在理想的情况下,我们希望能花上好…

    2016-01-06
  • 用户体验设计师的进阶指南

    互联网行业大步流星、产品迭代周期越来越短,设计挑战日趋严峻。作为一名奋斗在前沿的设计师,你有多久没有更新自己的知识体系了呢?不论新人还是老司机,如何让自己的成长速度跟上行业的飞速发展,已然成为了一个重要命题。本文旨在帮助设计师正确、快速的成长,希望给进阶之路上的设计者们带来思考和启发(注:本文主要是指互联网产品设计、用户体验设计、交互设计、视觉设计等相关设计岗位)。我们认为,只有明确了努力的方向、找到了合适的方法、优化了学习的路径,才能...

    2018-03-14
  • 微信团队出品-Sketch插件合集Wesketch

    静电说:微信团队刚刚出品了一款针对Sketch的插件合集-Wesketch,让我们一探究竟吧。WeSketch能做什么?更高效的团队协作,如:UI Kit 同步、色板同步等。更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。如何下载和安装?访问Github地址:https://github.com/weixin/WeSketch/blo...

    2018-03-18
  • UED设计年会系列活动在江苏省宿迁市成功举办!

    欢迎点击上方蓝字免费订阅!阅读本文前,请您先点击本文标题下面的蓝色字体“快宿迁”再点击“关注”,并点击“置顶公众号”,这样您就可以每天继续免费收到文章了。每天都有分享。完全是免费订阅,请放心关注!2018年1月19—21日,UED设计年会系列活动在江苏省宿迁市成功举办,共议如何在当下中国,以设计、文化、艺术的力量引领城乡发展。年会系列活动包含“设计·文化·艺术引领下的城市发展和乡村振兴”高峰论坛、“衲田杯”可持续设计国际竞赛颁奖盛典暨第...

    2018-02-03
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 别让这10个设计误区毁了你的APP

    色彩:鲜艳的色彩更抓眼球,适宜于可点击的元素使用
    空间:在关键元素周围留下足够的空间,让用户更容易发现,也更容易操作
    排版:使用简单干净的字体(尽量使用笔画粗细统一的字体),并且挑选适合屏幕的字体,确保整体可读性。

    告知用户他们所处的位置,或者显示当前状态(比如光标悬停色彩改变等)
    当某个动作执行的时候,应当给出相应反应(比如提交表单完成之后给予成功提交的提示)
    告诉用户发生了什么,以及接下来将会发生什么(比如加载中的进度条)

    2017-05-21
  • 百度金融用户体验中心负责人 曲佳:设计师求职七宗罪

    继上个周五 19:00 腾讯互娱游戏平台部设计总监陈维的第一节课《如何通关 UI 设计师的游戏副本》后,昨晚百度金融用户体验中心负责人曲佳联合团队的设计经理孔敏,给知群的用户们带来了「七大公司设计师面试官授课合集」的第二节课《设计师求职七宗罪》,在分享的最后环节,也给出了目前百度金融尚未对外大规模公开的招聘信息(最近有跳槽意向的设计师们抓紧时间上车)。曲佳:百度金融设计架构师,百度金融用户体验中心-百度 FDC ( Baidu Fina...

    2018-04-04
  • APP框架之提示框架

    某日和iOS开发聊天,说到iOS规范里没有安卓中的Toast形式的提示。我有点惊讶,仔细回忆iOS的交互规范,似乎是有。后来找来书确认了下,竟然是没有。遂把这个框架整理了下,在文中同时也强调下Android的交互规范的差…

    2016-09-29
  • 当我们在讨论用户至上的时候,我们在讨论什么?

    用户价值=用户收益-用户成本用户价值=用户收益-用户成本-机会成本机会成本=备选产品用户收益-备选产品用户成本。

    2017-05-31