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

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


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

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

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

设计定位

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

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

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

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

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

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

相关推荐

  • [学生看过来]国外的大学交互设计学科的专业与相关分析!

    标签:交互设计专业 交互设计5个重要组成部分 Five Dimensions of Interaction Design。 交互设计Interaction Design 缩写为:IxD,也可以理解成Human-Computer Interaction 人与机器互动设计,旨在通过设计让电子…

    交互设计 2015-01-26
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12
  • 跟着电台动起来:如何设计跑步的垂直场景

    没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。

    2017-05-12
  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31
  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 让你的设计拥有高转化率的配色知识简明指南

    互补指的是我们视野中色彩和色彩之间相互补足的关系。选择色轮中处于相对位置的色彩,构成的配色 方案令双眼觉得和谐。最常见的互补配色有两种,三元配色和复合配色,我们将稍后探讨。
    对比则可以将不同的元素区分开来,从而降低视觉疲劳,构建出视觉重心和焦点。元素之间的高对比度让文字更容易被识别,引导用户注意到更关键的信息。背景和背景之上文本的色彩选取就是一个非常常见的对比度的问题,我们会随后聊到。
    色彩对于用户的情绪上的感染也是一个重要因素。

    较小的文本应当确保至少和背景之间有4.5:1的对比度比率
    较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1

    2017-05-22
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 译文 | 如何通过讲故事来简化用户体验设计

    原文来自UXPin Studio,原作者是Jessica Lowry,一位英国的用户体验设计顾问,笔者译来与大家共勉“用户乘坐飞机在一个茂密的森林上一边飞行一边寻找地面上的路径,他正在寻找的是一颗红色的种子。这颗红色的种子是被外人引入森林的,目的是用红色种子生长出来的植物来消灭其他植物。损失将会是无法接受的。但是红色种子有好几颗,用户需要在种子长成植物之前定位和移除它们。”

    2017-05-27