IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

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

Catherine • 2017-05-13 07:37 • 交互设计

因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

文章目录[隐藏]

  • 核桃APP界面展示
  • 核桃APP视觉规范
  • 小结

因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

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

2016已经接近尾声,上两天刚参加完比赛,利用这几天空闲时间,把最近沉淀下来的东西分享出来。

上个月团队小组进行友谊比赛,命题是“邮件”(沟通)。规定大家以产品思维去设计一款全新的产品,形式不限。很难得的是所有人都参加了产品设计的每一个环节。我们秉着发现问题、解决问题的态度开始了这次友谊比赛。

通过不停的尝试与否定后,我们锁定目标人群为威客群体。针对威客群体接私单的特定场景,通过用户问卷、访谈、旅程图,最后得到以下几个痛点:

  1. 来回寄合同,费钱费力费时间
  2. 执行沟通的过程中经常改需求
  3. 合同的拟定,需要在网上找模板
  4. 对于新客户,不了解,不能完全信任
  5. 可能会逃单、违约

针对这几个痛点,我们的解决方案是:

  1. 增加发送合同邮件,双方直接签约,无纸化
  2. 通过邮件沟通,后期作为凭证
  3. 平台提供各种合同模板
  4. 增加个人资料、信息(个人、公司网址)添加评价系统
  5. 定金冻结功能

所以,最后我们的产品定位是:威客人群的无纸化沟通签约工具。

通过这次尝试,大家都参与了所有流程——信息收集、竞品分析、确定目标人群、场景梳理、用户旅程图、寻找痛点和机会点、信息架构、交互稿、视觉稿。这对于我们每一个人都有很大的帮助。

因为最近做公司项目的设计规范,所以决定把核桃的设计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

至于为什么叫“核桃”,有三个维度的寓意:

  1. 与合同谐音
  2. 威客就是用智慧在互联网上赚钱的人,而核桃补脑,形状又像大脑,所以寓意恰巧吻合。
  3. 核桃的外壳是坚硬的,给人一种受保护的安全感,而邮件、合同也正是如此。
  • 界面设计:林佳娜、蔡鑫
  • logo设计:苏桂
  • 交互设计:李祖松、丁明艳、蔡鑫
  • 规范设计:蔡鑫

核桃APP界面展示

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

app分三个模块:

  1. 沟通(普通邮件与合同邮件)
  2. 合同
  3. 我的

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

以上就是概念稿的所有设计页面,下面来主要展示一下设计规范。

核桃APP视觉规范

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

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

规范从7个维度来展示:

  1. 前言
  2. 命名
  3. 颜色
  4. 文字
  5. 图标
  6. 控件样式
  7. 互动状态

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

规范说明:

  1. 此规范为核桃App基础规范,未涉及到内容尽量采用相似性原则进行设计
  2. 此规范以iphone7尺寸一倍图(375×667)进行设计、标注、说明
  3. 输出切图格式为png
  4. 规范是在概念稿阶段输出,所以会有考虑不全的情况,此处只是为大家提供思路与方法

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

设计原则:

  1. 简化流程,降低用户学习成本
  2. 轻量化、扁平化设计理念
  3. 情感化设计体现、重视品牌传播

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

命名规范:

  • 模块_类别_功能_状态.png
  • 举个例子:nav_button_search_default@2x.png
  • 对应中文:导航_按钮_搜索_默认@2x.png

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

颜色分为:主色、点缀色、灰色系

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

字体使用各系统默认字体,但为了统一设计稿使用平方regular字体。

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

字体大小:18、16、14、12、10(一倍图尺寸)

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

桌面图标大小根据每个平台尺寸适配

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

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

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

通用图标尺寸有:16x16px、24x24px、48x48px、64x64px、100x100px,如有特殊情况可根据实际情况制作图标,但应尽量采取相近原则

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

导航栏

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

底部标签栏,高度为50px

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

按钮共有三种样式,以后如有增加通用样式,需加入控件库。

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

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

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

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

图标与按钮一定要考虑Normal、Disable、Pressed、Selected、Clicked这5个状态。

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

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

小结

有设很多计师会提出“规范只是公司给外部看的一种噱头”,更像是体现一种公司视觉形象(VI)。其实,互联网公司的产品设计规范并非是仅仅用来宣传形象的,更多用来使用、简化开发过程、使多个产品拥有一致的体验,是落到实处的东西。在一个部门含有多个产品线的情况下,此时产品设计规范最能体现其作用。

所以,我觉得规范本身其实就是一种美!

 

作者:菜心(微信号:410628210  微信公众号:菜心设计铺),华为ITUX用户体验设计师(主视觉),3年工作经验,参与华为Welink、3MS、连长社区等多个项目的用户体验设计工作。欢迎大家互相交流关注。

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

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

iPhonelogologo设计UXVR交互交互设计产品产品经理产品设计体验设计分享图标场景字体微信情感化设计核桃App沟通用户用户体验用户体验设计用户体验设计师界面设计经验经验分享视觉视觉规范设计设计原则设计师设计规范资料转载
赞 (0)
CatherineCatherine
0
生成海报
优化App的设计:防止用户错误,并建立良好的错误信息
上一篇 2017-05-13 06:45
在交互稿中,应重视「键盘类型」的标注
下一篇 2017-05-13 08:35

相关推荐

  • 微信热点

    美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • 微信热点

    我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 嘘!手机能听出你声音里的情绪 交互设计

    嘘!手机能听出你声音里的情绪

    对我们大部分人来说,每天心情有点变化是很正常的。女人的一天常常是喜怒哀乐随机出现,当然一般也就自己调整过来了,不至于要死要活。但有一类人例外,躁郁症患者。 事业不顺、丢了工作、失恋等等,当生活的不幸降…

    2014-12-13
  • 微信热点

    线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • 思路总结:从体验设计角度做有效竞品分析 交互设计

    思路总结:从体验设计角度做有效竞品分析

    本文作者总结了自己在实践中学习和应用过的竞品分析思路,一起来看看~

    2017-05-05
  • Facebook 改变「点赞」背后的故事

    Facebook 在上段时间做出了一个改变,堪称是最近科技界的最重磅的新闻之一,那就是他们改变了自己实施已达 7 年的「赞」的功能,增加了 5 种新的回复选择。从某种程度上说,这是 Facebook 近几年在自身产品设计上迈…

    IxD案例 2016-03-03
  • 交互的细节!向用户征询IOS授权的五种常见设计模式

    对于iOS app,当功能涉及到推送通知、访问照片或调用相机、获取地理位置等等时,都需要向用户申请授权。申请会发生在app运行的过程中,而不是像Android那样在安装的时候就莫名其妙的问用户是否同意app调用某些系统…

    交互设计 2015-09-17
  • 日期选择器设计总结 交互设计

    日期选择器设计总结

    本文是作者对时间选择器设计做的一个小总结。enjoy~

    2017-04-27
  • 从零开始学交互

    交互设计中,你不可不知的八个度

    数十万互联网从业者的共同关注!作者:李煜佳,华为交互设计师。专注于用户体验及服务设计,擅长设计分析、交互设计、细节体验提升等工作。作者原创并投稿早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱…

    2017-08-01
  • Hybrid APP 会吃掉微信等应用? 交互专题

    Hybrid APP 会吃掉微信等应用?

    先看一则新闻:Facebook今天推出了依托在Messenger上的虚拟助手M。这款虚拟助手借助AI+人工的方式为用户提供服务,M背后的人工运营者被称为M trainers,是Facebook公司里的合同工,而非正式员工。除了提供服务,他…

    2015-08-28
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress