LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
来看看微信界面设计的WeUI暴力美学
2016年5月29日

写在开头,以表明动机、甩掉一切可能需要承担的责任。

说明一下目的:看到传播很热的微信WeUI,应该说是一种比较简单暴力的表现形式,但落实到设计者进行学习和实操时,具体数值应该会更有参考性;

说明一下过程:部分数据来自CSS样式,部分数据来自截图后PS测量。

说明一下成果:数据中类似色值本身并不具有参考价值,但是动态变化方法值得参考。

其实,规范首页设计上配色清爽、排版简洁、内容上分类清晰,甚得我心(相比于IBM庞大的结构复杂的没汉化的设计规范,真的是业界良心);

每个类别内的交互做得很直观,测试过程真是痛并快乐着;

微信WeUI设计规范查看链接:WeUI

接下来的内容是对WeUI中列举到的控件的一些理解,除了微信中的实例也会提及这些控件的通用用法;主要包括Button、Cell 、 Toast 、 Dialog 、Progress 、 Msg 、 Article、 Actionsheet、Icons、 Panel、 Tab、 Searchbar。

Button

一般情况,我们认为按钮有三态Normal(正常)、Pressed/Highlighted(按下)、Disabled(不可)。

121113Krk

图01:WeUI-BUTTON整理

121113YOm

表01:WeUI-BUTTON内容整理

  • 百分数代表不透明度
  • – 表示无变化
  • 线框类的button Pressed状态下仅在描边上加响应黑透蒙版

另外,我们知道表单中常用有RadioButton(单选)/CheckBox(复选框)控件,但是这两个控件在iOS控件库中是不存在的,且在移动端我们更多地会把这类需求设计成按钮平铺的形式(面积更大更易识别,如充话费时选择额度按钮 ),这个时候按钮就可能会出现Focused(选中)状态。微信中没有发现相关案例,但在表格中写明。

在规范中,配色方案的确定通常都是比较纠结的过程,而为了简化配色方案及为了更有通用性,我们常用的方法就是:调整透明度;

具体的做法比如表格中纯色类的按钮边界 是在纯色基础上叠加20%的#000000(不用靠感觉去吸色-调一个深色了),这种方法简单有效、理性;

再比如pressed状态,无论是什么背景的色值,通过叠加蒙版的方式都可以得到一个有效的明显的统一的反馈。

另外针对灰度等级的设定也可以使用调整透明度的方法,确定多个不同层级的色值;

Cell

解释为单元格,会不会更易被认知?

设计规范的初衷是为了让更多的工作人员迅速认知产品提高开发效率,并且不同的工作人员能在规范约束下做出交互、视觉等方面能保持整体和谐统一的设计;

比如:

  • 图中标识的 两边留白的统一(即栅格系统);
  • 不同文本内容选取的控件的一致性;
  • Pressed状态 通常在背景上加10%透明蒙版等细节;

121114mNp

图02:Cell列表整理


1212011xq

图03:Cell中的常用控件

  1. 操作列表(ActionSheet)
  2. 数字键盘(Keyboard)
  3. 选择器(Picker)
  4. 时间日期选择器(Date Picker)

Toast

临时的弹框用来表示一些提示信息,通常在3s±时间消失;

121202Mpa

图04:Toast整理

Dialog

在iOS标准UI控件中 也叫警告框(Alert)

121202oVs

图05:Dialog整理

应当尽量遵守:弹框内容须包含标题,有时候会包含正文;包含一个或多个按钮;避免出现不必要的警告框(对话框)。

另外弹框的形式一般情况下可以设计成居中弹框或者是底部的弹框,底部的弹框似乎是随着大屏手机的普及应需而生,现在也被越来越广泛得使用;

在iOS人机界面指南的控件篇章中,居底弹框是在Actionsheet(操作列表)中的例子,而居中弹框是Alert(警告框)的例子,因此个人觉得,当需要用户进行功能性的操作时用局底弹框,而提示性信息并需要用户确认时可用居中(如上图微信中的案例);

无论如何,保持用户沉浸在我们的APP中进行操作时,应当尽量在这些细节中感觉到统一和谐,有良好的用户体验是我们最终的追求。

Progress

121203RoE

图06:Progress整理

Msg

信息提示的面板

121203tX6

图07:Msg页面案例

Article

文本内容的规范

121204qju

图08:Article页面案例

通常,阅读类的应用会对内容的排版进行额外的调整,如网易新闻。在这里说一些常见的通用的文字处理方式:

  1. 要考虑文字的响应式变化,如在大屏手机和小屏手机中的单行文字显示数量变化引起的布局上的变化;
  2. 不同页面导航栏的文字使用相同字号,一般为17pt;
  3. 确保文字的可读性,最小字号不小于11pt(dp);
  4. 通常情况下,应用整体使用单一字体(后面附不同OS下文字使用规范);
  5. 1.5-1.8倍的行距是比较适宜的文本内容行距;如微信案例中为1.6倍(倍数是指在字号的基础上);
  6. 文本总是使用常规(regular)或中等(medium),一般不使用轻(Light)或者加粗(Bold);

121204Fj7

图09:不同OS下的文字使用规范

  • 当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换(无需额外标注);
  • 用photoshop或者sketch生成设计稿时,调整Text/Display,并将渲染模式设为Mac 更接近实现效果;
  • iOS会根据字号大小,自动调整字间距。

Actionsheet

操作列表的规范,在Toast中已提及

1212052EK

图10:Actionsheet页面案例

icons

图标的设计规范

121206daS

图11:icons页面案例

图标的设计是在UI设计中比较能体现界面风格的细节,icon的设计属于理性和感性比较交错的部分。对于细节要敢于创新也要舍得取舍。体量感的控制,风格的统一,视错觉下的调整……

Panel

面板的设计规范

1212069C5

图12:panel页面案例

我觉得WeUI中出现的pannel这部分可能有点多余,这应该和Cell部分一样,属于表单系列;只不过这里的表单是平时我们比较常见的部分(图文组合);

在这种图文组合中,如果能用上亲密性、对比、重复、对齐这几个原则,那一定会是一个标准舒适的界面。

Tab

Tab的设计规范

1212075CX

图12:Tab页面案例

我们知道Tab的高度一般取49pt,相对应的tab中icon的大小一半控制在25pt内;

SearchBar

搜索框的设计规范

121208LpQ

图12:searchbar页面案例

文末感谢开发小伙伴的技术支持。

本文出处:人人都是产品经理
作者:风口上的猪毛

微海报分享

Related posts

2021年2月4日

3dmax 2021 中文


Read more
2020年9月14日

国家职业资格培训鉴定实验基地BIM证书


Read more
2020年9月14日

绿色建筑产业联盟BIM证书考证


Read more
2020年7月7日

你要知道的平面设计形状——点线面


Read more

搜索本站

最新文章

  • 3dmax 2021 中文 2021年2月4日
  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模