童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

实战分享:核桃App界面设计及视觉规范

5月1日 程染筱投稿
  因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。
  2016已经接近尾声,上两天刚参加完比赛,利用这几天空闲时间,把最近沉淀下来的东西分享出来。
  上个月团队小组进行友谊比赛,命题是“邮件”(沟通)。规定大家以产品思维去设计一款全新的产品,形式不限。很难得的是所有人都参加了产品设计的每一个环节。我们秉着发现问题、解决问题的态度开始了这次友谊比赛。
  通过不停的尝试与否定后,我们锁定目标人群为威客群体。针对威客群体接私单的特定场景,通过用户问卷、访谈、旅程图,最后得到以下几个痛点:
  来回寄合同,费钱费力费时间
  执行沟通的过程中经常改需求
  合同的拟定,需要在网上找模板
  对于新客户,不了解,不能完全信任
  可能会逃单、违约
  针对这几个痛点,我们的解决方案是:
  增加发送合同邮件,双方直接签约,无纸化
  通过邮件沟通,后期作为凭证
  平台提供各种合同模板
  增加个人资料、信息(个人、公司网址)添加评价系统
  定金冻结功能
  所以,最后我们的产品定位是:威客人群的无纸化沟通签约工具。
  通过这次尝试,大家都参与了所有流程信息收集、竞品分析、确定目标人群、场景梳理、用户旅程图、寻找痛点和机会点、信息架构、交互稿、视觉稿。这对于我们每一个人都有很大的帮助。
  因为最近做公司项目的设计规范,所以决定把核桃的设计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。
  至于为什么叫“核桃”,有三个维度的寓意:
  与合同谐音
  威客就是用智慧在互联网上赚钱的人,而核桃补脑,形状又像大脑,所以寓意恰巧吻合。
  核桃的外壳是坚硬的,给人一种受保护的安全感,而邮件、合同也正是如此。
  界面设计:林佳娜、蔡鑫
  logo设计:苏桂
  交互设计:李祖松、丁明艳、蔡鑫
  规范设计:蔡鑫
  核桃APP界面展示
  app分三个模块:
  沟通(普通邮件与合同邮件)
  合同
  我的
  以上就是概念稿的所有设计页面,下面来主要展示一下设计规范。
  核桃APP视觉规范
  规范从7个维度来展示:
  前言
  命名
  颜色
  文字
  图标
  控件样式
  互动状态
  规范说明:
  此规范为核桃App基础规范,未涉及到内容尽量采用相似性原则进行设计
  此规范以iphone7尺寸一倍图(375667)进行设计、标注、说明
  输出切图格式为png
  规范是在概念稿阶段输出,所以会有考虑不全的情况,此处只是为大家提供思路与方法
  设计原则:
  简化流程,降低用户学习成本
  轻量化、扁平化设计理念
  情感化设计体现、重视品牌传播
  命名规范:
  模块类别功能状态。png
  举个例子:navbuttonsearchdefault2x。png
  对应中文:导航按钮搜索默认2x。png
  颜色分为:主色、点缀色、灰色系
  字体使用各系统默认字体,但为了统一设计稿使用平方regular字体。
  字体大小:18、16、14、12、10(一倍图尺寸)
  桌面图标大小根据每个平台尺寸适配
  通用图标尺寸有:16x16px、24x24px、48x48px、64x64px、100x100px,如有特殊情况可根据实际情况制作图标,但应尽量采取相近原则
  导航栏
  底部标签栏,高度为50px
  按钮共有三种样式,以后如有增加通用样式,需加入控件库。
  图标与按钮一定要考虑Normal、Disable、Pressed、Selected、Clicked这5个状态。
  小结
  有设很多计师会提出“规范只是公司给外部看的一种噱头”,更像是体现一种公司视觉形象(VI)。其实,互联网公司的产品设计规范并非是仅仅用来宣传形象的,更多用来使用、简化开发过程、使多个产品拥有一致的体验,是落到实处的东西。在一个部门含有多个产品线的情况下,此时产品设计规范最能体现其作用。
  所以,我觉得规范本身其实就是一种美!
投诉 评论 转载

实战分享:核桃App界面设计及视觉规范因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一……5个设计小技巧,创造令人愉悦的用户体验我们常常探讨用户体验,那么用户体验到底是什么?许多人认为,用户体验更多的是关乎产品的可用性(产品是如何运作的)。而实际上,用户体验远不止于一个“能用”的东西,它是关于用户的主观……移动界面动效设计的全方位科普指南读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。动效在用户体验设计中正变得越来越重要,那么动效能带来什么好处呢……当卡片式UI不再流行,列表式UI将是王牌作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。随着MaterialDesign的流行,卡片式……撇开设计师的视角,普通用户是如何看待设计细节的?做设计久了,设计师很少能够真正站在用户的角度看待网站和APP。今天的文章,我们来聊聊普通用户眼里的设计细节设计师对于自己的网站以及APP产品的视角,和用户往往非常的不一样……帮你梳理:卡片式UI的设计最佳实践卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你……用户体验与可用性的差别有多大?一个好的用户体验究竟是什么?它与可用性易用性的差别有多大?这是从事这份工作后没有停止思考过的一个问题,因为对用户体验不同的解释会导致不同的测量范围。ISO定义说明用户体验……什么样的文字聊天,才是一种好的阅读体验?本文不是要讨论IM产品的体验设计,而是聊天内容本身的阅读体验。数字的强迫症前几天,主管问我要手机号和身份证号,用于制作工作相关的证件。由于是钉钉上沟通的,很简单一件……解读互动行业,鲜为人知的我们这样做网站大浪淘沙,就像2。0时代最火的人人、开心网没有把握移动互联网的机遇纷纷衰败,转型脚步落后的互动公司也逆流而逝,很多互动设计师都被迫找寻新的方向。本文作者将给大家介绍什么是互动设……卡片式设计,并不能支撑所有的设计需求卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。MaterialDesign的流行让卡……网页感知价值研究:UI中的感知价值“感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。UI中的感知价值拥有好的感知价值的对用户浏览网站是很有帮助的,……设计产品的第一个环节:定义方向策略,有理有据做设计本文作者将来聊聊设计产品的第一个环节定义方向策略,这是后续设计的大前提和指导方针。我们需要从老板、产品运营、用研及设计团队分别获取有效信息,进行分析整合,以得到正确、完善的方向……
如何签出合法有效的电子合同?看这篇就够了!那些10年前经典的设计,现在如何(上)重塑做事逻辑:两种用户体验设计思路全面解析如何做好产品可用性测试?拆解开关背后的设计细节解析营销中台产品模型5个细节,带你看看大厂产品的精彩设计蚂蚁森林的游戏化(下篇)语音交互设计探究以车载场景为例从防错到容错,设计思维升级AB测试中12个常见的误区(下)在知乎做产品设计,是一种什么样的体验?

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界