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

相关推荐

  • 产品设计师的自我重启 IxD案例

    产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22
  • 网易UEDC的交互设计书单 (上) 从零开始学交互

    网易UEDC的交互设计书单 (上)

    为什么列这个书单?常有读者留言:想要学习(或精进)交互设计,有什么书可以推荐的?其实网上已经有很多交互设计的书单可以参考啊,那么我想读者问这个问题的真正含义应该是:有哪些书是真正值得读的?于是我们让…

    2017-08-04
  • 微信热点

    Sketch入门教程,教你4步打造完美投影

    经常逛Dribbble,Behance还有很多外国设计网站的小伙们应该都会发现,流行了一阵子的扁平化风都带有一个很清爽的投影(diffused drop shadow)。比如像这样的这样的还有这样小伙伴们有没有自己尝试过去做呢?会不会觉得很简单?确实,使用Sketch的小伙伴儿们应该都知道,Sketch添加投影的方法超级简单,旁边Shadows按钮一点击,就添加了一个投影。但有个问题是,Sketch的投影不是很好控制,容易做出这种四周黑...

    2018-04-16
  • 阿里设计专家深度解读:全链路设计师和设计增值再现

    分享嘉宾:汪方进(1688UED设计总监) 点评嘉宾:高峰(阿里巴巴国际UED B2B总监)、周敏青(阿里巴巴国际UED AliExpress总监)   前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:M…

    交互专题 2017-09-11
  • 表单页面功能元素设计攻略:字段种类及属性说明 交互设计

    表单页面功能元素设计攻略:字段种类及属性说明

    本文参考了一些表单编辑平台的字段功能,基本上涵盖了平时常用的所有表单字段。

    2017-05-10
  • 微信热点

    【交互设计】一门感性与理性相结合的专业

    交互设计Sheridan交互设计本科是安大略省唯一一所提供该专业的高等院校。专业强调学生的创造力和逻辑思维,并且会学习到创意过程中的各个阶段的实践经验,从研究和规划的设计与执行。第一次见到文俊同学是在今年国际部举办的春节联欢晚会上,他一直帮着学生会布置会场,忙前忙后,哪里需要帮忙,哪里就有文俊的身影。更令人印象深刻的是他非常标准的广东普通话,来自广东的中国学生并不少,但是他的“广普”着实令人印象深刻。文俊同学四年前来到Sheridan,...

    2018-04-07
  • 社区O2O与传统社区平台的对比 交互设计

    社区O2O与传统社区平台的对比

    社区O2O是一个需要长时间探索的行业,主要是因为社区是一个复杂的地方,看似商机很大但真正建立一个粘度很高的平台并不那么容易,但平台无论从何点切入,其社区的复杂性决定了在平台搭建时不得不去思考以下四点,分别是场景、内容、载体和融合,本次和大家探讨的是生活场景的打造和载体的介入。

    2017-05-21
  • 交互专题

    【新鲜译文】iPhone X人机界面规范

    译者:阿呜(UXRen翻译组成员)   iPhone X的超大尺寸、高分辨率以及它的全面屏给我们带来了以前从未有过的沉浸式体验和丰富的内容展现。   1、屏幕尺寸 iPhoneX竖屏时的屏幕宽度与iPhone6、iPhone7和iPh…

    2017-09-14
  • Principle:交互动画实例 Principle

    Principle:交互动画实例

    Principle是一款交互原型设计软件,轻松让你的想法变成现实,支持将交互动画转换成视频或者GIF,分享给别人。 你的动画交互想法,比如设计更好的移动APP交互效果成为现实,用Principle轻松帮你实现。Principle的原…

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

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