Siyu Hou 2020 - 2021 UX
1
输⼊⽂本 “Help architecture companies design and manage projects efficiently”
通⽤模型⽂档批注 Online drawing review service competitive Analysis 竞品分
析 跨端⼀致性设 design cross-platform 计 交互延展 Design resiliency 性
通⽤模型⽂档批注
【PC】Revit plugin tool redesign 竞品分析
通⽤模型⽂档批注 CBIM message center redesign
icon redesign /design guideline
竞品分 user-feedback analysis
跨端⼀致性设计
析 跨端⼀致性设 infomation design
tool content window redesign
交互延展性
new design component kit
计 交互延展
message push design
性
通⽤模型⽂档批注 CBIM design system
- Writing
竞品分析 CBIM writing principle / tone 跨端⼀致性设计
scenario writing guideline 交互延展性
模型名称.cim / ⽮量⼆维图纸.dxf 模型名称.cim / ⽮量⼆维图纸.dxf
v1
⾃动保存于 2021-02-23 12:34
v1
构件
缩略图
⽂件
构件 批注
⽂件
批注
1
⼆三维
主视⻆
测量
Online drawing review Review drawing & Edit model at anywhere 全屏
图纸旋转
全屏
Why architects need to review drawing online? User survey
Pain Point
User Needs
Design Goal
I invited the clients ( 50 volunteers including designers、PM、MEP design leaders ) to fill the survey and analyzed questions below How many times needed to adjust design in SD phase? 4
1
3
Review feedbacks cannot be delivered in time ;
visual guideline of different status of comments
Designers are easily to forget revise some markups
clearify edit permission of different type of users
16
Where do designers do the drawing review?
Calling a small group to sitting along users table to review digital
30
work table on site
Why？ It’s a energy waste to invite multi-disciplinary teams together;
12
meeting
drawings will be much more effcient.
8
Users take time and energy to hold across group meetings
0
What do designers need to prepare before review?
Interface layout which fits in users working habits
of drawings/models wherever they are
design plane \model \2D &3D compare view modes muti-users edit at same time
Why？ Models and drawings need to put together and view side by side
0
online models
Designers can easily review same set
Cost money and time to print out drawings.
10
drawings
0
Users take extra work preparing for review without credit
all above
40
How to inform all the designers to adjust drawings？ wechat
20
verbal
Why？
3 2
Trackable feedbacks directly on drawings
hightlights of feedbacks on drawing files
Designers usually talk to one another beside their laptops because they
reply or discuss the feedback with other designers
need to look at details of drawing and model to explain some drawing issues
notifications between reviewers and designers
25
email others
clear interface guiding user to add review comments
Users cannot receive all the feedbacks in time
20
3+
models
Clear and trackable review work flow
10
2
others
Why？
User cannot understand review feedbacks without visually see the details of drawings/models
How to view drawing files on other platforms ? How to view drawing/model file efficiently? User-test task: 1.choose a drawing/model - 2. drawing & model comparison - 3. add a markup Tried 4 different BIM related design platforms and analyzed UX beween them.
Interface Layout
Takeaways 1. Design simple flow of adding markups or feedbacks just as user drawing by hand 2. Design different tool sets and make the frequent used ones easier to reach 3. Users (most right hand users) are tend to reach right side of the interface
Platform
User
Scenario
Add Markups
Interface Layout
1. drawing/model
2. tool sets
3. markup tool
View Markups
Switch Drawings / Models
PlanGrid
web/ipad
Design led
offical review
full screen
right side drawer
right side drawer
hold&drag shapes for markup
on drawing
choose from drawing nav
BIMPlus
web
Designer
daily check
full screen
left side nav & bottom
bottom menu
hold&drag shapes for markup
on drawing
when choose model, change to split view
BIM360
web/ipad
Designer
daily check
full / split screen
left side menu
left side menu
pop markup edit window
on drawing
choose from drawing nav , highlight on model nav map
BIMX Pro
ipad/mobile
Construction on site check full / model add on
top nav & tool menu
top tool menu
pop markup edit window
on drawing
motion changes from model to drawing view
Adminstritor
Web layout- full screen view + markup on drawing
模型名称.cim / ⽮量⼆维图纸.dxf
构 件
⽂ 件 构件
⽂件
批注
通⽤批注服务
缩略图
⻚ ⾯ 批 注
v1
⾃动保存于 2021-02-23 12:34
Layout and Features file name 1
Z-primary：Top navigation
模型名称.cim / ⽮量⼆维图纸.dxf
构件 构件
⽂件 ⽂件
批注
version
auto save / 5s
v1
file info：basic info、save、download、more、close
⾃动保存于 2021-02-23 12:34
缩略图
3
Z-secondary：2D drawing map help user which part of the drawing they are looking when zoom in
批注
6
Z-secondary：markup tool set Highly frequent use
2
Z-secondary：content nav different type of drawing info： 1. model components；
Drawing Content 4
Z-tertiary：content 2d drawing/ 3D model / 2D&3D split view
2. file list； 3. markups list;
5
Z-secondary：model/drawing edit tool set view mode model editing view setting
【Initate & close】 tool flow Content Navigation
Model/Drawing edit tool
Add Markups
hover⼯具
hover云线批注
2D图纸
2D图纸
2D图纸
hover更多⻆标 1
1
展开⾯板， 挤压视图区
2D图纸
1.点击⾯板关闭退出
1.点击⾯板关闭退出
1.常驻右侧不⽤退出
2.开启测量、全屏 ⼯具时退出
2.开启其它辅助⼯ 具时退出⾯板消失
2.可以切换其它批 注图形和批注颜⾊
2D图纸
hover⼦⼯具
框画批注范围
2D图纸
2
1
1
⼯具名称
选中构件， 展示模型
3D模型
2D图纸
2D图纸
填写批注信息
2D图纸
⼦⼯具露出 2
点击卡⽚外区域 收起批注 1
Add Markup Flow 模型名称.cim / ⽮量⼆维图纸.dxf
构件
⾃动保存于 2021-02-23 12:34
v1
缩略图
Put markup tool set at right side of the interface users can easily click the tool and start to drag shapes to create markups
⽂件
批注 已解决 1
李⼀⼆
1
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起居室(厅） 08-24 20:00
⼤王 2021-01-11 18:00 好的，这就去改。 于 2021-11-03 20:00 指派任务给⼤王
1
3
回复
批注⼯具组常驻右侧： 帮助⽤户快速找到，点击即⽤ 最⼩操作成本
Add Markup Flow
Design the hold&drag steps when creating a markup shape on drawing
模型名称.cim / ⽮量⼆维图纸
构件
v1
⾃动保存于 2021-02-23 12:34
缩略图
⽂件
批注
1
1 1
Add Markup Flow
View & edit markup feedbacks at the markup position; Allow user to focus on drawing without disruption which may caused by switching eyes between different positions
模型名称.cim / ⽮量⼆维图纸
v1
⾃动保存于 2021-02-23 12:34
缩略图
构件
⽂件
李⼀⼆
1
⼿写输⼊
⼀般问题 住宅应按套型设计，每套住宅应设卧室、起居室(厅）、卫⽣ 间浴室、厨房 @陈诚
常⻅问题 严重问题
批注 1
强规强条
李⼀⼆
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起居室(厅）、卫⽣ 间浴室、厨房 @陈诚
1
常⻅问题 严重问题
强规强条
简单描述框选位置的设计疑问
1 1
上传附件 指派设置 取消
1
上传附件
确定
取消
发送
指派设置
1
取消
1
李⼀⼆
⼀般问题
常⻅问题 严重问题
强规强条
住宅应按套型设计，每套住宅应设卧室、起居室(厅）、卫⽣ 间浴室、厨房 @陈诚
指派设置 取消
发送
发送
Click on markup card will active the markup popover on drawing
Highlight reveiwer、type&status of markups；
模型名称.cim / ⽮量⼆维图纸.dxf
and replied information of markups
1
李⼀⼆
住宅应按套型设计，每套住宅应设卧室、起居室(厅） 08-24 20:00
⽂件
已解决 ⼀般问题
1
李⼀⼆
3
批注
搜索 全部问题类型
最新批注在前
全部状态
⼆维批注
已解决
3
1
08-24 20:00
缩略图
三维批注
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起居室(厅） 1
⾃动保存于 2021-02-23 12:34
批注列表 构件
已解决
v1
1
李⼀⼆
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起 居室(厅） 08-24 20:00
⼤王 2021-01-11 18:00
回复
好的，这就去改。 简述意⻅
我理解这⾥需要表达很多信息，减少图纸不明确的 地⽅，减少⼤家的信息差。
王刚
住宅应按套型设计，每套住宅应设卧室、起居室(厅）
1
3
张凤亮
08-24 20:00
回复
好的，这就去改。 我理解这⾥需要表达很多…
严重问题
李雪
3
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起 居室(厅） 08-24 20:00
于 2021-11-03 20:00 指派任务给⼤王
1
已解决 2
发送
⼤王 2021-01-11 18:00 好的，这就去改。
住宅应按套型设计，每套住宅应设卧室、起 居室(厅）
2021-01-11 18:00
1
3
强规强条
已解决 2
⼤王
⼀般问题
住宅应按套型设计，每套住宅应设卧室、起 居室(厅）
发送
于 2021-11-03 20:00 指派任务给⼤王
李⼀⼆
08-24 20:00
08-24 20:00
于 2021-11-03 20:00 指派任务给⼤王
1
3
已解决 2
发送
1
1
已解决
1
3
于 2021-11-03 20:00 指派任务给⼤王
回复
Official Review of BIM building model
When open an model file or change view mode to model view,a review list will show as a nav bar on rightside of the screen
modeless window
review nav bar
Split screen to view & compare review board with model
Web to Mobile on site adminstrtor： Analyze the design by comapring drawing with construction process； work flow：mobile device; look into model/drawing details; sent review report（assign to designers and attach onsite photos)
Designer/ Design lead： they need to review or get drawing reviewed on daily basis； work flow：working on laptop; multi time review；look into drawing details
Web 1920px - 1280px
模型名称.cim / ⽮量⼆维图纸
v1
⽮量⼆维图纸.dxf
⾃动保存于 2021-02-23 12:34
Pad
Mobile
1366px - 1024px (12.9’’ 11’’ 7.9’’)
812px / 315px
v1
⽮量⼆维图纸.dxf
编辑批注
⼀键解决
构件
缩略图
构件 ⽂件
⽂件
* 问题类型
批注
⽂件
* 批注信息
3
图纸
批注
9:41
构件
搜索
请选择
请选择
* 批注信息
全部状态
清楚的描述可以促进交流…
⼆维批注
三维批注
清楚的描述可以促进交流…
0/100
1 0/100
批注
编辑批注
批注列表
全部问题类型 批注
v1
构件
* 问题类型
PM： check drawings and qucikly review on phone
1
李⼀⼆
1
⼀般问题
严重问题
强规强条
已解决 2
3
常⻅问题
3
附件
⼀般问题
张⼀⼆
住宅应按套型设计，每套住宅
附件
应设卧室、起居室
1
简单描述框选位置的设计疑问 3
取消 1
08-24 20:00
3
⼆维
主视⻆
测量
dwg控制器
保存 图纸旋转
3 已解决
指派对象
1
2 张⼀⼆
1
请选择
强规强条
编辑批注
住宅应按套型设计，每套住宅 应设卧室、起居室
上传附件
任务时间
1
指派设置
开始时间 ⾄
开始时间
08-24 20:00
1
3
* 问题类型
请选择
1
取消
发送
已解决
1
* 批注信息 2 张⼀⼆
强规强条
清楚的描述可以促进交流…
住宅应按套型设计，每套住宅
取消
保存
应设卧室、起居室 08-24 20:00
0/100 1
3
附件 ⼆维
主视⻆
测量
dwg控制器
图纸旋转
全屏
⼆维
主视⻆
测量
dwg控制器
图纸旋转 全屏
取消
保存
Define model & modeless popup window Popup window：basic container to present all drawing&model related tools （ ipad as an example ）
Model
「CBD 1.0」
选择颜⾊
Title bar
添加
设置
使⽤：主要⽤于沉浸式操作，⽆需与图纸 对照查看交互的功能
标题位置：默认⼀⾏⽂本，居中 标题
操作(图标/⽂字)位置：
颜⾊：#F6F9FC 投影：⽆投影
根据菲茨定律和移动端交互特性，遵 循操作优先放置在右上⻆原则
交互：从右⾄左进⼊，固定于界⾯右 侧，固定宽度320px
1.仅有⼀个操作时，操作置于右上⻆
取消
确定
标题
2.有多个操作时，主要操作置于右 上⻆，次要操作（关闭/取消等）置 于左上⻆
点击关闭按钮或者⿊⾊遮罩关闭⾯板
3.返回始终在左上⻆ 固定宽度320px
4.弹窗和⾯板标题区域，同侧操作 只有⼀个；整个⻚⾯，同侧最多两 个，过多操作会使⽤户感到困惑 (希克定律）。 固定宽度320px
Modeless
⽮量⼆维图纸.dxf
v1
编辑批注
dwg控制器
重置
构件
* 问题类型
使⽤：主⽤于需要与主视图图纸/模型对 照查看、交替操作的功能
图层
请选择
视图
背景⾊
⽂件
Show one window as a time
搜索
* 批注信息 批注
清楚的描述可以促进交 流…
颜⾊：#F6F9FC
使⽤：同时启⽤多个功能时能顺滑的引导 ⽤户关注最新启⽤的功能。eg. 新建批注流 程中，编辑批注信息的同时打开设置颜⾊ ⾯板调整批注标注颜⾊
投影：#000000 6% y-4,模糊16 交互：从右⾄左进⼊，固定于界⾯右侧， 固定宽度320px
交互：遵循⼀次展示⼀个功能⾯板原则， 已开启的功能⾯板⾃动收起但功能保持启 ⽤状态；结束当前的功能后，已启⽤的功 能⾯板⾃动再次展开
1.点击关闭按钮关闭⾯板，点击主视图不 关闭⾯板
固定宽度320px
固定宽度320px
A-FLOR-STRS A-FLOR-STRS-A
附件
A-FLOR-STRS-B A-FLOR-STRS-C 1
指派对象
取消
⼆维
2.⾯板区域可上下滑动
1
0/10 0
3
任务时间
*左侧导航点击后⾯板从左⾄右进⼊，遵 循⾯板出现位置跟随点击位置
A-FLOR
请选择 开始时间 ⾄
A-FLOR-STRS-D 1
A-FLOR-STRS-F
开始时间
保存
主视⻆
测量
dwg控制器
图纸旋转
全屏
Mobile Layout-maxmize drawing content & natural gestures
横屏
竖屏
Mobile Layout- adjustable split view between drawing and model
分屏
【Initate & close】 tool flow Content Navigation 模型名称.cim / ⽮量⼆维图纸.pdf
Model/Drawing edit tool
v3
模型名称.cim / ⽮量⼆维图纸.pdf
v3
模型名称.cim
v3
hover⼯具 构件
构件
⽂件
⽂件
⼆维图纸
批注
⼆维图纸
批注
三维模型 选择⼆级⼯具后，视图内容切换
⼆维
⼆维
从右⾄左滑 出⾯板，
名称
名称
模型名称.cim / ⽮量⼆维图纸.pdf
名称
名称
三维
⼆维
⼆三维
图纸对⽐
名称
测量
名称
名称
三维
主视⻆
视图快照
剖切
全屏
设置
构件树
v3
覆盖视图区 构件
⽂件
⼆维图纸
批注
模型名称.cim / ⽮量⼆维图纸.pdf
v3
构件
⽂件
批注 ⼆三维
名称
名称
名称
名称
已选⼀个构件
模型名称.cim / ⽮量⼆维图纸.pdf选中构件后⾯板 v3 ⾃动收折⾄位置，
⾃动进⼊全屏
⼆维图纸
hover 测量⼯具
⾃动进⼊全屏模式扩⼤视图⾯积
⾮模态⾯板
测量
距离
⻆度
⾯积 退出全屏
⼆维
构件
⽂件
批注
⼆三维
三维模型
名称
⼆维图纸
名称
名称
名称
名称
测量
名称
名称
Adjustable modeless popup window ⽤户可掌控⼯具浮层展示区域，保持查看⽂档主体不变 users are able to drag up and down popup window when comparing tool information with model
批注⼯具组常驻右侧： 帮助⽤户快速找到，点击即⽤ 最⼩操作成本
Measure tool：
Hold【Polit Wheel】to move, which helps more accurate measurement
Magnify the end point as moving, which helps user to find end point auto select a point as 【S】
hold till 0.2s show the magnified view
show measure distance as hand left
NUM NUM
AT-1
DQHZ
NUM
AT-1
M
DQHZ DQHZ
M
NUM
AT-1
DQHZ
M
【PC】CBIM design tool Revit -Plugin visual Redesign
NUM
AT-1
DQHZ DQHZ
M
32
425 tool icons in 8 fields
2px 32
20 1px
20
NUM 200%
1 2 3
Keyline visual balance
Main Shape architectual components
Badge functional highlight
3D
Problem：current icons are hard to read and understand
1. icons are not match with brand visually 2. Lots of icons do not match their function visually 3. Too much detail lineworks make icons hard to read
Redefine RVT-Plugin icons within the icon system - Style are transfered from 2d linework to shapes and 2.5d shapes
Basic system icons
action
Custom icons
standard
doctype
tool nav
WEB
16x16
20x20
24x24
32x32
PC
16x16
20x20
24x24
32x32
20x20
24x24
32x32
MOBILE
RVT Plugin - tool menu
PC platform secondary nav
PC platform primary nav
primary nav actived 48x48
32x32
20x20
32x32
48x48
60x60
website branding
Listen to users’ concern and learn their design language I organized and invited architects、PM 、MEP led etc to participated in the user testing Feedbacks
dimension line should align with main object
wrong architectural symbols
slope mark is not correct
wrong proportion
ceilling need beams to support
measurement lines is no correct
the proportion of wall is not correct
too much details
Some tools are easiler to understand showing in 2D drawing symbol
lots of electronic devices change shapes as in different types
Summaried user-testing doc as design basis
Design goal: Improve icon readability
Clearify main structure
2D filled badge
Simply line weight & type
TD
Bold font for visual balance
Avenir Next
连续线 在线性、平⾯、3D图标中都会使⽤的元素； 1. 1px 2. 圆⻆端点
结构线 绘制体块⼉间⾯与⾯的交接线，即结构线； 1. 1px 2. 直⻆端点 3. ⼀般为连续线，需要时可⽤虚线
特殊线 应符合标准线型图例
Futura
Visual style testing
Define components of an icon
Summarize type and style of each component according to vary catogories of design tools
Linework
建筑标⾼
…
2D drawing symbol
房间分区
…
Badge
2.5D object 布置设备单体
…
删除
引导线
防⽕通道
墙、梁、板、柱
合并、拆分
轴⽹、轴线
管线剖⾯展示
结构模型
⾃动
批注云线
平⾯图中构件图例
墙开洞
云端联动
折断线
图纸
⻛机
审查
测距线
⽆障碍坡道
插头
导出
管线排布
参数
⽤地红线
Combination of components = icon …
合并梁 (体块+⻆标）
梁居中排布（平⾯+轴线）
标⾼层设置 （体块+标注线+⻆标）
Delivered the icon design guideline
Delivered the icon design guideline
Tool popup window redesign 消防电话⾃动布置 系统
CBIM建筑 CBIM建筑
CBIM结构
CBIM通⽤
区域选择
CBIM管线综合 CBIM管综
当前视图 管线系统设置 避让⻆度设置 典型剖⾯排布 ⽅案结果赋回 赋回检测表 管综设置
⾃动断开
智能管综
⾃动避让
across different tool sets and more importantly do not match with the updated CBD design library.
布置设置
辅助管综
布置
取消
剖⾯范围内上下基准的对象缺失
上下基准 左右基准
管线设置
前后基准 数据类型引导
mm
标题
200
mm
标题xxxxxx
1
标题xxx
0.93
标题
300
㎡/s
布置位置
标题
150
mm
底距地
1. Me and my collegues delievered different layout based on different design principles when desiging a new tool
1.3
m
管综管线系统设置 距⻔边 0.4
m
给排⽔
2. Font-end colleagues find time wasting when they have to ⽴即赋回
JB JY 暖通 PY
电⽓
机械给排⽔热⽔管道 机械给排⽔冷⽔管道 编号添加 重⼒流管道（暖通） 重⼒流管道（给排⽔）
click
重⼒流管道分类型 弱电桥架 强电桥架
下⼀步
完成
导出配置
导⼊模版
T-FA.消防电话分机 消防电话族
房间名称关键字 ⼀键匹配 移⾄ 变配电室 钢瓶间 管线系统名称 计算机⽹络机房 JWS消⽕管系统1… 消防泵房 ZAS消⽕管系统1… 消防电梯机房 消防控制室 ZQS消⽕管系统1… 消防⽔箱间 ZRS消⽕管系统1… 消防站 JHS喷淋管系统1… 名称添加 JRS喷淋管系统1…
空调通⻛⻛管 J (B) 空调采暖管道 J (Y) P (Y) 消防⽔管道
⾼温⾼压管道
上⼀步 设备族选择
管线系统分组列表 消防设备编号关键字
Scenarios:
F2
绘制基准 消防电话⾃动布置
取消
标⾼
选择基准
标题
确定
adjust codes of similar components multiple time
⼿动选择
基准调整
⼿动避让
The interaction design and visual design of popup window is lack of consistency
整个模型
添加
ZHS喷⽔管系统1…
状态
颜⾊
未匹配 click
未匹配 未匹配 未匹配 未匹配 已匹配
添加
已匹配
ZQS喷⽔管系统1…
已匹配
确定 取消 ZWS喷⽔管系统1…
已匹配
ZWS喷⽔管系统1…
已匹配
ZWS喷⽔管系统1…
已匹配
ZWS喷⽔管系统1…
已匹配
完成
Popups size 320px
Define popup window layout
420px 32px
页头
32px
页头
12px
32px
页头
12px
内容区域
12px
600px
12px
12px
内容区域
12px
Popups
12px 12px
12px
内容区域 12px 确定
取消
Model popup / Modeless popup 12px 确定
取消
12px 确定
Nav bar
Tool title
Content margins
Functional information
加载资源
Content
管综排布 排布范围
我获取的
企业资源
我的项目
有效⾼度
项目名称 测试项目
1000
专业
建筑
资源包
xxxxx资源包
7500
mm
排布区域
20px 参与管线 12px
楼地板
总计 8px
8px
8px 8px
窗 幕墙 楼梯坡道
Action bar
mm
有效宽度
构件类别
10px 8px 门
12px
电梯扶梯
请选择资源包并选择构件类别
8
⻛管
3
⽔管
2
桥架
1
未知管线带配件…
1
配置
未知管线带配件…
1
配置
8px
厨卫设备 开始管综
功能操作
功能操作
功能操作
功能操作
更多
确定
取消
More important
less important
确定
取消
取消
取消
Define vary layout samples based on different working scenario Functional info：Input groups for a single work flow
Action Feedbacks Dialog
Popups 输入组
「Input group」
「Alert / Comfirm / Wrong」
eg. tool ：architectural post attribute editing
pop up information telling users pay attention to an action or risk result
标题
数据类型引导
mm
标题
200
mm
标题xxxxxx
1
标题xxx
0.93
标题
300
㎡/s
标题
150
mm
工具标题
确认要删除这条信息吗？ ⼀系列的信息描述，可能会很⻓。也可以是很 短同样也可以带标点。
内容区域 确定
确定
取消
「Cascade layout」
输入组 + 选择 功能区标题1
「Result Notification」
eg. tool： automaticly arrange posts on second floor of a building 选项1
pop up information telling users result or recommended further choice of an action
选项2
工具标题
选项3
功能区标题1 标题
取消
结果反馈
内容区域
一系列的结果状态描述，可能会很长。也可以是很短 同样也可以带标点。
功能区标题2 标题
数据类型引导
mm
标题
200
mm
标题xxxxxx
1
标题xxx
0.93
标题
300
㎡/s
标题
150
mm
功能区标题2
操作一
操作二
内容区域 标题xxxxxxxxx 标题xxxxxxxxx 确定
取消
Define vary layout samples based on different working scenario Functional info：tabs & navigation for a more complex work flow Popups 「navigation + content」 eg. tool: edit post component attributes of the entire building model
「Tabs + content (nav + content)」
侧导航+详情
内容 1 内容 2
eg. tool: building model setting, including choosing architectural components、locating axis etc…
内容2详情
内容 4 内容 5
可选页签
选中页签
标题
数据类型引导
mm
标题
200
mm
标题xxxxx
1
标题xxx
0.93
标题
300
㎡/s
构件类别
标题
150
mm
楼地板
项目名称：测试项目
内容 3 工具标题
列表+详情（卡片grid）
工具标题 可选页签
选中页签
专业：
建筑
资源包：
xxxxx资源包
可选页签
更新时间从近至远
A-平开⻔-单扇
全不选
A-平开⻔-单扇
-镶玻-3列花格
全选
A-平开⻔-单扇
加载到模型
A-平开⻔-单扇
-镶玻-3列花格
门 标题xxxxxxxxx
内容区域
标题xxxxxxxxx
平开⻔ 防⽕⻔ 卷帘⻔ 窗
A-平开⻔-单扇
幕墙
-镶玻-3列花格
A-平开⻔-单扇
A-平开⻔-单扇
A-平开⻔-单扇
-镶玻-3列花格
楼梯坡道 确定
取消
电梯扶梯 厨卫设备
A-平开⻔-单扇 -镶玻-3列花格
A-平开⻔-单扇
A-平开⻔-单扇
A-平开⻔-单扇
-镶玻-3列花格
确定
取消
Delivered component library
CBIM design guideline: Writing
Basic writing guidline
基 本 规 范
Disruption/ Risky result
rational / patient / optimum
General Tone
concise / respect / professional
Sucessful result / Finished flow
warming / delight / inspiring
Scenario writing guidline
场 景 规 范
CBIM’s user
Characteristic
18-50 in architecture & construction industry
Role
Architect / Structural enginner
Design collaboration across fields
Project Manager
Professional Language
Cvil Enginner
High Effient
MEP Enginner
Work Precisely
City planner from government
Writing principle research
Basic Tone
(Clear and Concise)
(Birf and easy to understand)
(Address what matters first)
Basic Tone
(Natural Conversation)
(Faithful and Trustful)
(Balanced Intimacy)
(Never say never)
(Only use ‘please’ when system requests for user’s extra work)
(Avoid Apology)
Date&Time
Nouns&Verbs
Empty States
(Guide to actions)
(No data result)
Procession Feedback (Concisely address steps and highlight what user can do)
(Show brif motion and words to ease user’s waiting )
( Highlight what users can acheive in vary working scenarios)
(Explain current status and show time left )
CBIM Message Center Redesign - efficient readability
消息中⼼ 应⽤
私信
切换⾄待办
设计管理系统 还有30天服务到期 驿书 还有30天服务到期 今⽇ 5 驿书
驿书 系统 通州区万达⼴场讨论组已解散
个⼈
个⼈中⼼ ⽤户 你已成功加⼊中设数字团队
资源
资源平台 系统 「⻔」已上架
5 智能
智能设计 ⽤户 刘⾦霖发布了北投项⽬-主体设计…
12:01
11:00
08-24
08-24
2021-07 5
企业消息提醒
07-26
系统 最热浏览构件集合已上线
平台
CBIM平台 系统 通州区万达⼴场讨论组已解散
07-26
企业
查看更多 1
旧
新
Current user feedbacks
消息中⼼
消息中⼼ 应⽤
私信
切换⾄待办
今⽇
设计管理系统 还有30天服务到期
驿书
驿书 还有30天服务到期 今⽇ 5 驿书
个⼈
驿书 系统 通州区万达⼴场讨论组已解散
个⼈
⽤户 你已成功加⼊中设数字团队
待办 张三邀请你加⼊北投团队待确认
资源平台 待办 企业资源「⻔」发布⾄平台待审批
智能设计
智能设计 待办 北投项⽬-主体设计项⽬做法包待校审
智能设计 ⽤户 刘⾦霖发布了北投项⽬-主体设计…
08-24
⽴项管理 待办 通州区万达⼴场合同待审批
07-26
系统 最热浏览构件集合已上线
交付
交付管理 待办. 北投项⽬交付策划书待审批
平台
CBIM平台 系统 通州区万达⼴场讨论组已解散
07-26
08-24
Can i click on one todo and go to the specific page?
08-24
Cannot distinguish message type by first glance 08-24
资源
08-24
I donot know what messages should i pay more attention to
08-24
Why two messages are highlighted at the top?
资源平台 待办 企业资源「⻔」发布⾄平台待审批
企业
查看更多
Cannot easily find most urgent todo list
7天内
⽴项
2021-07
企业消息提醒
11:00
08-24 智能
5
App icons are lack of visual highlights
个⼈中⼼
待办 北投项⽬-主体设计项⽬做法包待校审
资源平台 系统 「⻔」已上架
5 智能
待办 通州区万达⼴场讨论组已解散
12:01
11:00 智能
资源
驿书
12:01 资源
个⼈中⼼
Feedbacks
返回全部消息
查看更多
08-24
Design Goal : Quickly find the message view as read team Notification
view as read
Clearify message type
app go to app landing page as read
Highlight todo list popup chat window as read Chat
Highlight message content Company/team
Multi-type message search
normal done Todo
Message Type
go to app landing page as read about overdue overdue
view as read Notification
CBIM System
Clearify message type 消息中⼼
3 main message types 1、Highlight todo entrance at the top
待办消息
待办消息 应⽤消息
12
私信
系统消息
已处理
今天 09:30
张三 指派你查看⽂件「通州区万达⼴场⾦融⼤厦项⽬ 今⽇
图纸」
系统消息
今天 09:30
CBIM⼯作台版本更新
Todo list
待处理
待办消息
2、present CBIM system message as one type 3、improve app icons’ readability
全部
通州区万达⼴场⾦融⼤厦项⽬
将于2021-03-25逾期
查看详情
CBIM⼯作台版本更新，请更新⾄最新版本体验最新 改进。发布说明：修复了已知BUG，优化⽤户… 更多
待办消息
今天 09:30
张三 指派你查看⽂件「通州区万达⼴场⾦融⼤厦项⽬
4、Shorten the click steps to reach todo messages
图纸」
七⽇内
5、Highlight status of todo messages such as ‘overdue’ 6、Sort status of todo message
通州区万达⼴场⾦融⼤厦项⽬ 系统消息
昨天 14:25 查看详情
CBIM⼯作台版本更新 CBIM⼯作台版本更新，请更新⾄最新版本体验最新 改进。发布说明：修复了已知BUG，优化⽤户… 更多
待办消息
今天 09:30
张三 指派你查看⽂件「通州区万达⼴场⾦融⼤厦项⽬ 系统消息
2021-03-24 09:30
图纸」 通州区万达⼴场⾦融⼤厦项⽬
CBIM⼯作台版本更新 CBIM⼯作台版本更新，请更新⾄最新版本体验最新
查看详情
改进。发布说明：修复了已知BUG，优化⽤户… 更多
查看更多
查看更多
Increase readability and consistency of the message cards
消息类型
发送时间显示
1
Type：icon+title
2
Sending Time
消息详情，最多两⾏。更多的消息内容已英⽂符号…
3
Title
展示；⽤「更多」⽂字按钮展示在末尾引导
4
Content
5
Project Info + Status of Todo
6
Action Bar
标题
项⽬名称展示
待办状态标签
查看详情 Lengend 1
2
3
4
6
must have 5
at least choose one optional
Multi-type message search ⼋仙 XBOAT
中设数字股份有限公司
Message landing page 中设数字技术…有限公司
1、Add navigation for different message types 2、Show multi-type messages list as user typing in 3、Layout adjustment to increase reading efficiency
⼤禹 XAQUE
⾸⻚ / 消息中⼼ / 应⽤消息
中设数字技术…有限公司
应⽤消息
消息中⼼
⼋仙 XBOAT CBIM平台
25
刘永霖 ⼤禹 XAQUE 刘永霖
⻢良XCUBE
刘永霖
⾸⻚ / 消息中⼼ / 应⽤消息
应⽤消息
消息中⼼ 书
应⽤消息 待办消息
5
驿书
驿书 驿书
刚刚
中建⼀组 将你移出讨论组
私信 消息 5
个⼈
个⼈中⼼ 个⼈中⼼
群组头像 58分钟前
（7⼈）
5
资源
资源平台 ⽴项管理
今天 09:30
3 条与“书”相关的消息 张三 发布到平台的「⻔」已通过审核，可…
全部消息
应⽤
待办消息·3
5
驿书
私信
你已成功加⼊中设数字 ⾦融⼤厦项⽬说明书研讨 将你移…
消息设置
待办消息
驿书
书
应⽤消息
今⽇ 应⽤
系统消息
中设数字股份有限公司官⽹ ⻢良XCUBE
今⽇ 系统消息
系统消息 消息
今天 09:30
中建⼀组 将你移出讨论组
消息设置 个⼈中⼼ ⾦融⼤厦项⽬说明书研讨 将你移…
⽤户消息
今天 09:30
张三 指派你查看⽂件「通州区万达⼴场⾦融⼤厦项⽬图纸」
更多相关消息
资源平台 3 条与“书”相关的消息
七⽇内
未选择消息 ⽴项管理
⽴项管理 ⾦融⼤厦项⽬说明书研讨 将你移…
⾦融⼤厦项⽬说明书研讨 将你移… 左侧选择应⽤展开相关消息
智能设计
智能设计
3 条与“书”相关的消息
3 条与“书”相关的消息
通州区万达⼴场⾦融⼤厦项⽬
⽤户消息
查看详情
今天 09:30
张三 评论了你发布的「通州区万达⼴场⾦融⼤厦项⽬设计图纸」：明确下是否可以通过审批并且抄送 相关负责⼈。
7天内 2021-07
⽤户消息
合同管理
2021-07-28 20:00
今天 09:30
张三 指派你查看⽂件「通州区万达⼴场⾦融⼤厦项⽬图纸」
「通州区万达⼴场⾦融⼤厦项⽬⽴… 通州区万达⼴场⾦融⼤厦项⽬
查看详情
Design Goal : Notification Push guideline
When to push and when to disappear?
Design Goal : Notification Push guideline
Show notification push as work flow needed 1、Message is pushed from right to left 2、Notifications will disappear in 5s
Notifications disappear in 5s
3、Comfirm messages need user to click in order to disappear 4、Meassage cards overlayed one on another when more that 3 cards showed at the same time
When ≥3 cards showed at the same time，cards overlayed one on another
unfold
Design Goal : Avatar style redesign
Define Avatar as square shape and simply to three sizes 1、Define Avatar as square shape rather than oval shape 2、Avatar style test across different apps of the CBIM platform 3、Adjust Avatar’s guidline of CBIM component library
Scenario Test
Avatar Combination
Type
Avatar Guideline
群组头像
Default
Photo style
Wrong style
1. 企业/团队默认头像 2.展示⽤户名： 中⽂： 20px 尺⼨展示最后⼀个字；其他尺⼨展示最后两个字 英⽂： 20px 尺⼨展示最后⼀个字⺟；其他尺⼨展示最后两个字⺟；字⺟⼤写
photo filled
loading failure
张三
群组头像
（2⼈）
（4⼈）
适⽤于48px 尺⼨，⽤于会话列表中
ZS
群组头像采⽤灰⾊底⾊（#E1E6F1） Company Team
群组头像 （5⼈）
24px
2-4⼈每个⼈照⽚显示实际⾯积24*24px
User
5–9⼈每个⼈照⽚显示实际⾯积16*16px 9⼈以上只展示前9⼈的头像
Size 组合排列
20px
32px
44px
60px
80px 8
三
张三
6px
4px
4px
2px
2px
张三
张三
+5
张三
8
+5
8
适⽤于展示空间充裕
适⽤于展示空间紧凑
⼈员信息为重点信息
⼈员信息为辅助信息
张三
头像徽标组合 ≥32px时，使⽤「 little数字」 样式徽标； 24px图标使⽤「 dot 」样式 5
Small
Middle
Large
Extra Large (web)
How to get particular sizes?
相对尺⼨推导⽅式(rem)
最⼩字元素 10px⾼
1. 根据最⼩字符10px, 2个汉字出发 2个汉字距头像两边间距依次为 2、4、6、8、10…递增扩展
2. 根据视觉⽐例调整字阶
20px
40px
30px
50px
60px
70px
80px
44px
48px
52px
56px
60px
64px
80px
张三
张三
张三
张三
张三
张三
张三
张三
10
10
10
10
10
10
10
10
10
张三
张三
张三
张三
张三
张三
张三
张三
张三
张三
12
12
12
14
14
16
16
20
20
24
20px
24px
28px
32px
36px
40px
三
张三
张三
张三
张三
10
10
10
10
三
张三
张三
10
10
10
4
4
群组头像 （6⼈）
群组头像 （7⼈）
群组头像 （8⼈）
群组头像 （9⼈及以上）
企业空间 中设数字技术股份…
前往进度策划 常驻应⽤
正式任务单 20
临时任务单 23
闪链
智能设计
A20058181
A20058181
任务单名称过⻓只显示⼀⾏超…
任务单名称过⻓只显示⼀⾏超…
主
2020-11-23 截⽌
正式
按时完成
5
逾期未完成 1
2020-11-23 截⽌
正式
13 / 19
任务进度节点
延期完成
8
按时完成
待完成
5
逾期未完成 1
任务进度节点
技术审查
主
CBIM on PC
13 / 19 5
延期完成
8
待完成
5
设计管理
项⽬管理
A20058181
任务单名称过⻓只显示⼀⾏超…
任务单名称过⻓只显示⼀⾏超…
主
2020-11-23 截⽌
正式
任务进度节点
资源平台
Define navigation interaction of
A20058181
按时完成
5
逾期未完成 1
主
the platform
2020-11-23 截⽌
正式
13 / 19
任务进度节点
13 / 19
延期完成
8
按时完成
待完成
5
逾期未完成 1
5
延期完成
8
待完成
5
进度策划 A20058181
A20058181
任务单名称过⻓只显示⼀⾏超…
任务单名称过⻓只显示⼀⾏超…
主
2020-11-23 截⽌
正式
主
取消 截⽌ 2020-11-23
正式
确定
更多 任务进度节点
Ask me anything
按时完成
5
逾期未完成 1
13 / 19
任务进度节点
13 / 19
延期完成
8
按时完成
待完成
5
逾期未完成 1
5
延期完成
8
待完成
5
12:55 PM 25.08.2015
Landing page merged in home screen in order to highlight “CBIM accompanies users’ daily work”
顶部导航点击展开
验证码登录
密码登录
⼿机号
4位验证码
获取验证码 平台应⽤集合点击展开
设计⼯具集合点击展开
登录 还没有账号？去注册 其他⽅式登录 我已阅读并同意《⽤户服务协议》、《隐私协议》
Ask me anything
12:55 PM 25.08.2015
Ask me anything
12:55 PM 25.08.2015
Click on three sides nav bar to show navigation of the platform Minimize CBIM platform
99
Open two sides of navigation
刘永霖
全部 hover
常驻应⽤
Apps
Ask me anything
Ask me anything
12:55 PM 25.08.2015
Ask me anything
12:55 PM 25.08.2015
Revit Plugin
12:55 PM 25.08.2015
Detail status of side navigation 企业空间
企业空间
中设数字技术股份…
中设数字技术股份…
常驻应⽤
常驻应⽤
闪链
click
闪链
智能设计
智能设计
技术审查
技术审查
设计管理
设计管理
项⽬管理
项⽬管理
资源平台
资源平台
驿书
驿书
更多
更多
Pin secondary apps to the primary (frequent use) navigation board 企业空间 中设数字技术股份…
企业空间
项⽬信息
中设数字技术股份…
进度策划
进度策划 click
常驻应⽤
常驻应⽤ 校审⼯具
校审⼯具
闪链
智能设计
我的校审 click
校审管理
闪链 我的校审
智能设计
设计管理
出图管理
后期配合
技术审查
设计管理
项⽬管理
项⽬管理
资源平台
资源平台
出图管理
后期配合
进度策划
更多
更多
经济设计指标
CBIM provides default apps based on Architect’s role
校审管理
校审记录管理
校审记录管理
技术审查
项⽬信息
经济设计指标
User are able to adjust their navigation apps based on their role and daily work scenario
Define the window container to show different apps All windows are modeless; Users are able to full screen the window or minimize the window; Minimized window will fold into side navigations According to user’s daily design work, they may open multiple apps and tools at the same time, therefore i also defined the rule when multiple windows overlayed one on another
闪链 常驻应⽤
通州区万达⼴场⽅案设计
通州区万达⼴场⽅案设计 通州区万达⼴场⽅案设计 ⼀层
⼀层
⼆层
⼆层
三层 四层
通州区万达⼴场⽅案设计
名称
修改⽇期
类型
⼤⼩
⻔
2021-01-04 17:21
⽂件夹
790mb
窗
2021-01-04 17:31
⽂件夹
230mb
通州区万达⼴场⾦融⼤厦模型.rvt
2021-01-04 17:21
rvt 模型
256mb
通州区万达⼴场⾦融⼤厦模型.rvt
2021-01-04 17:21
rvt 模型
256mb
通州区万达⼴场⾦融⼤厦图纸.pdf
2021-01-04 17:21
pdf 图纸
13mb
通州区万达⼴场⾦融⼤厦模型.rvt
2021-01-04 17:21
rvt 模型
256mb
三层 四层
12:55 PM 25.08.2015
Ask me anything
共6个项⽬
以上是最新的⼯作项⽬ The End Thanks for reading谢谢你看到这⾥ my works