惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
GRAHAM CLULEY
T
Tenable Blog
Know Your Adversary
Know Your Adversary
C
CXSECURITY Database RSS Feed - CXSecurity.com
P
Privacy International News Feed
S
Security Affairs
NISL@THU
NISL@THU
O
OpenAI News
Attack and Defense Labs
Attack and Defense Labs
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Hacker News: Ask HN
Hacker News: Ask HN
Webroot Blog
Webroot Blog
Schneier on Security
Schneier on Security
S
SegmentFault 最新的问题
S
Schneier on Security
G
Google Developers Blog
V
V2EX
C
Check Point Blog
U
Unit 42
Google DeepMind News
Google DeepMind News
T
Threatpost
阮一峰的网络日志
阮一峰的网络日志
T
The Exploit Database - CXSecurity.com
Recent Announcements
Recent Announcements
M
MIT News - Artificial intelligence
S
Secure Thoughts
博客园 - 司徒正美
Recorded Future
Recorded Future
P
Proofpoint News Feed
Spread Privacy
Spread Privacy
K
Kaspersky official blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
AI
AI
博客园 - 聂微东
N
News and Events Feed by Topic
SecWiki News
SecWiki News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
Vulnerabilities – Threatpost
P
Palo Alto Networks Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Engineering at Meta
Engineering at Meta
Recent Commits to openclaw:main
Recent Commits to openclaw:main
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
WordPress大学
WordPress大学
The Hacker News
The Hacker News
The Last Watchdog
The Last Watchdog
Project Zero
Project Zero
W
WeLiveSecurity
博客园 - Franky

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理, 企事业单位数字化的业务供需本质 – 人人都是产品经理, 医疗智能体·第1讲——医疗信息化重构:从“辅助软件”到“自主智能体”的范式转移 – 人人都是产品经理, 粉丝量就是空气!!! – 人人都是产品经理, 用户说“薯片碎了”,机器回“要买吗?”:意图识别的翻车与破局 – 人人都是产品经理, RAG召回准确率从75到90 我做对了这三件事 – 人人都是产品经理, AI大事件:Anthropic改收费、OpenAI发安全版、手术机器人纳入医保、阿里发布”秒悟” – 人人都是产品经理, Chrome 推出 Skills 新功能,Agent 重塑上网方式 – 人人都是产品经理, GitHub前创始人拿了a16z的1700万美元,做Agent时代的Git – 人人都是产品经理 拷贝或克隆其他 Flutter OH 项目到本地后无法运行 – 人人都是产品经理, 优惠券设计:优惠券创建 – 人人都是产品经理, 不用死磕文档!AI 助手 1 小时搞定飞书 CLI 安装 + 配置 + 知识库 – 人人都是产品经理, 用小龙虾做竞品分析报告:从2天到20分钟,我是怎么做到的 – 人人都是产品经理 用小龙虾做市场分析报告:搞懂这3个公式,市场规模不再靠猜 – 人人都是产品经理, 你早就在做 Harness 工程,只是不知道它叫这个名字 – 人人都是产品经理, Think Long就够?你可能想多了! – 人人都是产品经理, 货代SRM实战:供应商准入怎么做,才能让资源池不是通讯录而是可交付网络? – 人人都是产品经理, 如何做好用户调研?详解基本技巧 – 人人都是产品经理, 木鸟、途家、美团对打,平台春天行动开“卷” – 人人都是产品经理, 入职才发现公司不靠谱?小红书从业者求职避坑指南 – 人人都是产品经理, 美国 AI 三巨头联手封堵,中国 AI 突围之路在何方 – 人人都是产品经理, 小红书,放在需求对面的镜子 – 人人都是产品经理, AI 会带来大规模失业吗? – 人人都是产品经理, 从出单到补货前,我第一次犹豫:该不该放大? – 人人都是产品经理, Flutter 三方库鸿蒙化适配:5 种高效检查方式,快速判断是否需要适配 – 人人都是产品经理, 从做产品进阶拿结果:医美机构产品经理转岗科室运营经理 – 人人都是产品经理, 阿里HappyHorse,一场关于“Token经济”的阳谋 – 人人都是产品经理, To B AI:客户留存落地的观察与思考 – 人人都是产品经理, AI产品的“生命线”——数据采集、标注、清洗的产品化设计 – 人人都是产品经理, 谈谈AI Agent(二):当“孩子”能自己“体验世界”时,你该学什么? – 人人都是产品经理, UI/UX设计师的3层能力进阶,前两层让你活下来,第三层…才是真正的分水岭 – 人人都是产品经理, 2分钟 → 30秒,效率提升75%:B端产品经理如何用「规则枷锁」驯服AI幻觉? – 人人都是产品经理, 还没来得及学OpenClaw,来了个更猛的:Hermes Agent – 人人都是产品经理, AI日报:宇树机器人跑出10m/s刷新世界纪录 – 人人都是产品经理, 一文说透基金互金如何用情绪价值引导用户决策做转化 – 人人都是产品经理, 当浏览器开始替你”看”网页:AI 浏览器正在亲手拆掉它脚下的那张网 – 人人都是产品经理, 0代码,一天时间我Vibe Coding了个网站 – 人人都是产品经理, Hermes 和 OpenClaw 之争,Agent 的能力应该“装上去”还是“长出来”? – 人人都是产品经理 视频生成的“桌子”,字节Seedance 2掀完,阿里快乐马掀 – 人人都是产品经理, 从听不懂到完全信任:我的 Codex 深度产品体验 – 人人都是产品经理, 当虚拟偶像有了北京户口,与真人偶像还有什么区别? – 人人都是产品经理, 会说,远远比会做更重要 —— 对 SBTI 爆火现象的五层观察 – 人人都是产品经理, AI产品经理必看:当“搭环境”比“选模型”更重要,你的认知还在2024年吗? – 人人都是产品经理, 2026年AI产品商业化核心逻辑:从功能demo到规模化营收的3个必破卡点 – 人人都是产品经理, 京东围绕供应链,卷起裤腿下场的那些事儿 – 人人都是产品经理, SBTI一夜刷屏:它赢在了“太会说人话” – 人人都是产品经理, 折扣零售的真相:不是便宜,而是价值感! – 人人都是产品经理, 和甲方吵了一架,最后加钱做了——我学到的ToB产品经理生存法则 – 人人都是产品经理, 和几位小红书操盘手聊了8小时,干货全在这 – 人人都是产品经理, 智谱GLM-5.1登场,开源模型首超Opus4.6!!! – 人人都是产品经理 Anthropic收入凭什么反超OpenAI,终于有人把这事说清楚了 – 人人都是产品经理, 史上最有故事感的技术报告——Claude最强模型Mythos 7个极其精彩的细节 – 人人都是产品经理, 模型不是壁垒,Harness 也不是 – 人人都是产品经理, 抖音本地生活业务思考21 – 人人都是产品经理, Superpowers:145k Star的AI编码框架,到底是什么来头? Superpowers:145k Star的AI编码框架,到底是什么来头? – 人人都是产品经理, OpenAI 的路走错了,Anthropic Harness 解法启示:模型需要实践专科生 – 人人都是产品经理, 画原型图的前一步:设计站点地图 – 人人都是产品经理, 给 DeepSeek 的最后一封催更信 – 人人都是产品经理, 手把手教你用 Claude Code 搭建 AI 营销团队:5 个 Agent、12 项技能,独立完成研究、写作、设计全流程 – 人人都是产品经理, 你以为大模型在学语言?不,它在重新发明语言学 – 人人都是产品经理 所谓Skill,不过是AI时代的工业垃圾 – 人人都是产品经理, 聊一聊内容传播的几个方法 – 人人都是产品经理, 当平台开始吃掉生态:从 OpenClaw 被封杀,读懂 Anthropic 的这盘棋 – 人人都是产品经理, 你装了 10 个 AI 插件,Obsidian 还是一个文件夹 – 人人都是产品经理 关于AI智能体架构演进的系统性思考:从单体试水到多体协同的重构 – 人人都是产品经理, 当“人”变成Skill,我们又该何去何从? – 人人都是产品经理 Mythos 事件:前沿 AI 治理的意外实验 – 人人都是产品经理, 货代CRM:信用与风险管理怎么做,才能把坏账风险拦在放货之前? – 人人都是产品经理, 从HR收集自拍照到员工自助录入——我见证了园区人脸识别从”不可用”到”真好用”的全过程 – 人人都是产品经理 千问闯关AI混沌期:阿里画靶,吴嘉张弓,马云射箭? – 人人都是产品经理,
万字干货!全新 UI 视角帮你掌握「界面三重构」的知识点
水手哥 · 2022-07-08 · via 人人都是产品经理

编辑导语:好的界面设计有利于用户更好的了解产品,也能提高用户的使用体验。那如果才能拥有一个好的界面设计呢?本篇文章中,作者分享了使用界面设计需要的一些方法和技巧,感兴趣的小伙伴不妨来看看~

当不确定成为常态,公司的组织架构频繁变动,产品不断迭代,设计师需要跟随用户需求、业务、产品进行技能迭代,UI设计师学习数据分析、运营、交互等技能提升自己。

这些技能都需要产品界面设计为载体,那么界面设计中有哪些确定不变的方法和技巧呢?那就需要对界面有更深入的理解。

一、如何理解界面设计

互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等,每个职能岗位对界面设计的理解深度也各不相同。

1. 交互视角

交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。

2. 组件化视角

产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时,他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件,比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

3. 视觉视角

UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。

4. 前端视角

前端工程师会从代码视角理解界面结构,相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。

5. 界面三重构构思

基于以上视角,现在我会以一种新的视角带你去理解和学习界面设计,它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。

但是在模型抽象时遇到了困难,如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读,模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。

模型的抽象不够简洁,有很多重复的点。这种结构很像组件化中的类别和状态。

我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ,因为交互和前端都是建立在界面之上的,所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时,如果有交互、前端的知识点,可以在此基础上接着写。

根据平面逻辑图我抽象出一个更简单的模型。可以从界面的X、Y、Z、XY、XZ、YZ去输出相关知识点,交互、前端在界面三重构的基础上阐述。

二、X轴设计

X轴设计中有位置的结构关系,位置的排序,段落文本行长的易读性,交互和前端中的应用。

1. 位置

X轴从位置上可以简化为左右、左中右的结构关系。

(1)左右结构

在左右的结构关系中,自古就有左为上,人的视线浏览顺序是从左到右,从上往下。所以重要的信息内容可以优先放在左边。

在舞台剧表演中,重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边,右边放箭头指向。

(2)左中右结构

左中右的结构布局让层级更加丰富,从而增加层次感。左中右的位置顺序是可以被定义的,常见的有左中右对应一二三的位置关系,也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。

(3)左右并列秩序

我们来看看App界面的底部Tab栏的结构,当我们随意打开一个App时,你还记得底部Tab从左到右的栏目分别是什么呢?可能经常使用的App我们很熟悉,对于不熟悉的应用可能就不是很了解。

但是我们依然可以从中找到规律,就是第一个栏目往往是首页,最后一个是我的个人中心,其他的相对比较模糊。

由此我们推断出从左往右的顺序并不是一二三四依次递减,而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计,同样也适用于B端的界面设计。

B端产品界面的导航结构第一个是首页(工作台)或最重要的内容分类,最后一个是更多或设置。同样遵循以上规则。

右侧位置重要最典型就是模态设计,在对话框设计中,确定和取消按钮往往把最重要的放置在界面的右侧,这时位置的排序确定为一,取消为二。

2. 易读性

文字段落编排时更多的需要考虑段落文本的易读性,当你设计C端产品时,因为屏幕尺寸的原因会忽略段落文本的行长,但在Web、B端设计中,行长的定义可以影响到读者的阅读效率和体验。

美国芝加哥有学者做过一个试验,人的眼睛是在不停地跳动,在跳动的时候是看不见字的,停下来的时候才能看见字,而且每次停下来只能看六个字。

所以一段文字不要排得太长,过长眼睛在阅读时会很疲劳,在阅读时我们更适合阅读较短的文字。

网页新闻详情页面的行长,我研究了纽约时报为640px、华盛顿邮报680px、Medium 680px,所以我们设计师可以控制行长最大在640—680px。

但是西文和汉字还是有区别的,站在前人的规则上去学习定义规则更加重要。

3. 交互改变位置秩序

位置的重要秩序其实是很容易打破的,在界面固定不变时结构中相对稳定,当交互大兄弟来了,说我想尝试改变改变,如图把手机的网易云音乐和QQ音乐进行组合成组,原来的一二三四的结构就被打破了,变成了一三二的视觉结构关系。

点开组合后,这时候用户大兄弟来了,网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。

因人而异,所以大家一定要带着客观的心态去学习,不同视角和不同思考维度都会有异样的结果。

4. 响应式与断点

X轴设计从前端的角度就是响应式和断点,因为载体的容器大小不同,前端代码主要用Media来打断点,不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。

三、Y轴设计

1. 视觉中心

物理几何中心是居中的,但是人的视觉中心是偏上的,有时候眼见为实是假的,视错觉中有大量的案例,在色彩和图形设计中需要视错觉的矫正。

如下图APP的闪屏页的Logo居中布局,考虑到有向下的重力和视觉中心偏上的理论,往往把Logo居于物理中心上方。

2. 倒金字塔信息层级

倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构,重要的信息放上面,越往下信息层级越低。

网页设计中还会有折线之上的运用,以前人们看报纸是折叠的,但是为了告知读书报纸展示也是有内容的,所以折叠设计时看到一些图片引导读者打开。

Apple官网的信息层级也遵循倒金字塔信息层级,上方Logo加导航,中间为最新发布的产品,下方为历史发布产品。信息重要层级依次递减。

Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。

3. 纵向模式

纵向模式是用户习惯自上而下滚动来浏览更多信息,当用户还未确定目标信息时,纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。

如图微信APP的发现界面,用户会选择一列一列快速浏览直到找到某一目标信息后,再横向浏览细节。

那么问题来了,上文中提到倒金字塔信息层级,重要的信息应该放置上方,为什么APP的Tab栏很重要却放置在界面底部,下文隐喻设计中“驾驶舱隐喻”会讲到。

四、XY轴设计

X轴与Y轴组合后就形成了一个平面,所以平面设计的理论知识在此次也适用。

1. 盒子原理

当我们做界面设计时,为了让界面的元素统一为一个整体时,给他们整体来个框框就形成了一个一个盒子的样式,这样更有利于组合信息。典型的设计有卡片、列表、模块化等。

2. 四角压边

在Dribbble的作品展示中,由于作品图片展示比例为4:3,为了平衡界面中的元素,常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。

运用到界面设计中最典型的就是卡片设计,比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计,四角放置信息,整体给人简洁大气的感觉。

四角压边在设计中是可以灵活运用的,可以把四角压边变成三角压边,两角压边。

如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时,四角压边就变成了两角压边,多用于列表页。

3. 跷跷板原理

四角压边的本质是跷跷板原理,通过调整元素让界面达到平衡。

跷跷板原理本质是平衡,需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。

在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大,右边的重量小,但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。

4. 8点网格(4点网格)

8点网格理论来源于谷歌Material Design的设计语言,4点网格理论来源于苹果iOS的设计语言。

个人还是更加喜欢iOS的4点网格,因为原子单位越小,可呈现的方式越多,可解决的问题方案也越多。

8点网格可以理解为最小单位,其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。

苹果和谷歌都是在定义产品系统中的度量单位,西方人一直想定义度量这个问题,其中最有名的就是勒·柯布西耶的《模度》,他的理论是以西方人的的比例结构来定义规范,并不能适用于全世界更多的人种比如东方人、非洲人。

但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的,最小为44pt。iOS定义了人类使用触控屏的基本度量,44pt也是4的倍率,这才是我喜欢iOS的4点网格的真正原因。

5. 视觉流引导

读者在看界面的时候,眼睛的视线受到画面内容的吸引,就会产生一个视觉先后的次序,将这些视觉集中点的先后依次连起来,就形成了视觉流导向。

设计师经常会考虑版面或界面上的文字是否会被阅读,实际上很多文字都不会被阅读,但是可能会被浏览。

视觉眼动仪可以检测到人们如何浏览一个页面的,从找到切入点,到了解界面中信息关注的先后次序,从而调整界面元素,来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。

(1)F模式

尼尔森F型视觉模型由Jakob Nielsen于2006年提出,他指出用户在浏览界面时,视线动线会呈现宛如英文字母F的形状,这种视觉浏览模式主要包括以下三个方面:

  1. 读者的眼睛会先从顶部开始,从左到右水平移动,浏览的上半部分会形成一条横向的运动轨迹,这就是F形状的第一条横线。
  2. 读者的目光会向下移动,并再开始从左到右观察,但浏览的视觉动线长度会相对短些,这就是形成了F形状的第二条横线。
  3. 读者从界面左边的部分进行垂直扫描,以较短的长度向下扫描,此时读者的阅读速度较慢,而且更有条理性和系统性,这样就形成了F形状的一条竖线。

根据尼尔森F模型,我们可以得出几个心理暗示:

  1. 读者在浏览界面时是快速扫视,不会仔细阅读每一个界面内容。
  2. 界面的头两段文字无比重要,多用小标题、短句引起阅读者注意。
  3. 将重要的内容放在最上边,将重要的信息显示在标题和段落的前部显示给读者。

(2)Z模式

Z模式是基于用户从左到右自上而下的阅读习惯,用户首先关注的上半部页面的内容,依照从头部的左边到右边,再沿着对角线浏览下一部分的中部左到中部右,循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。

(3)古腾堡图表法

古登堡图表法(Gutenberg Diagram)又称对角线平衡法则(Diagonal Balance),由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限:

  1. 第一视觉区(Primary Optical Area):左上方,读者首先注意到的地方。
  2. 最终视觉区(Final Optical Area):右下方,视觉流程的终点。
  3. 强休息区(Strong Follow Area):右上方,较少被注意到。
  4. 弱休息区(Weak Follow Area):左下方,最少被注意到。

如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。

五、Z轴设计

Z轴设计可分为视觉度层级(单界面)、结构层级(单界面)、产品用户流程(多界面)。

1. 视觉度层级(单界面)

视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。

(1)主体与背景

界面中使用背景色是让元素向前进,背景色多为灰色且有颜色倾向,偏冷色或暖色。

微信界面使用了偏冷色背景,Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。

(2)投影

界面中使用投影可以增加内容的视觉层级,之前追波流行的弥散投影也是为了增加界面视觉层级。

谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。

(3)色彩大于字重大于字号

色彩最典型的就是App的消息红色圆点,红色的波长最长,所以用最突出的红色来提醒用户有新动态。

字重是从面积的大小衡量的,标题文字常常加字重来提升视觉。

在定义组件时,鼠标悬浮、Hover的各种状态就是用颜色来区分,目的是让用户操作后有反馈的感知。

2. 结构层级(单界面)

界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载;导航层是位于内容之上,位置相对静止;遮罩层配合弹出层一起使用,又叫模态层;弹出层属于轻量化设计,比如消息通知、下拉菜单和加载、报错等状态提醒。

(1)模态对话框

如图模态对话框是用户在完成任务时,不希望跳转页面而打断工作流程,而是用Modal对话框在一个界面上承载相应的操作。

对于信息量不大,容器可展示的操作可用模态对话框。

3. 产品用户流程(多界面)

产品的界面设计需要从概念到信息分类到信息架构,目的是方便用户快速的搜索、筛选、辨别出有用的信息。

交互设计需要学习辛向阳教授的交互设计五要素:用户、行为、目标、场景、媒介。

产品的Z轴设计其实是从平面(界面)、空间(层级)、架构(关系)梳理出结构关系,但站在产品层面最重要的是信息与用户的交互设计,关注用户旅程地图中用户流程。

用户流程需要多界面之间跳转,这就形成了产品的Z轴界面设计。

(1)什么是用户流程

用户流程是用户从打开APP到完成任务关闭APP的使用全过程,包括了用户看到什么信息,做了什么事。

疫情期间每天都需要使用随申办小程序,用户流程是打开微信,进入到微信首页,下拉查看常用小程序,点击随申办,查看随申办,退出小程序。

根据用户流程优化体验,用户流程越短越好,操作流程尽量不超过5步。

用户流程要顾及头尾,即用户进入到一个新界面会看到什么信息,用户成功完成任务后会跳转到哪里,或显示哪些反馈信息。这些都是最容易被遗忘的接触点。

(2)如何确定用户流程

基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例,需要思考用户有哪些场景,如果知道谁发的,就会先通过找到人,然后进入其朋友圈找到信息。

如果忘记谁发的呢,那只能凭记忆里在朋友圈慢慢滑动,直到找到该信息。

以上从交互设计五要素行为和场景对用户流程进行分析,还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。

拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。

拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。

六、XZ轴设计

上文已经讲了Z轴相关设计,为什么还要写XZ轴、YZ轴的设计呢,从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性,也确定存在一小部分的案例可以解析。

1. Banner轮播图

Banner轮播图除了横向的X轴出场次序,还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计,Web端容器变大可以变成左右的交互设计形式。

2. 导航栏

导航栏是Z轴的视觉与交互结合,当前状态需要重点突出,视觉向前进,点击导航栏后底部的横线会有动效移动,可以侧滑导航栏选择类别,这样效率会更高;也可以侧滑下方内容切换选择。

3. 列表侧滑删除

列表侧滑是使用内嵌的布局方式,界面设计中用户习惯是先查看再操作,当容器大小放置不下可先隐藏操作按钮。

QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。

七、YZ轴设计

YZ轴多结合界面交互一起设计,通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等。

1. 页面滑动

信息流的设计多为Y轴设计,Y轴急促、紧张的情绪会让用户不停的刷信息。

信息流设计中采用相似的界面结构保持统一,比如固定的头像位置,固定的操作按钮位置,标题文本形式等。

微信朋友圈信息流一整块一整块的加载提高阅读效率;而抖音的视频流是一个一个加载,更注重精准推送和沉浸式的观看体验。

2. 键盘输入

键盘输入也是采用YZ轴设计方式,不同场景下的键盘输入交互也有差别,微信聊天界面的键盘输入框放置在底部,每次调用键盘组件时界面会从下往上移动。

而朋友圈评论时,键盘组件除了从下往上移动,还要对齐到对应评论的内容上。前端的定位技术会有所不同。

八、模型升级

界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等,当然也可以替换成桌面端、Web、小程序、APP、B端设计等。

这样就可以把中间的要素抽象成N,界面三重构模型升级为N——X轴、Y轴、Z轴,N可以为单一的内容比如界面,也可以是N=N+N比如界面加交互一起思考。

简化的模型更适合微观层面的细节设计,并不适合于宏观视角的分析设计。

1. 如何使用该模型

我们来举一个组件的例子,比如导航设计共分为二级导航,我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考,X轴的多为横向全局导航,Y轴多为侧边导航栏。

当交互大兄弟来显示二级导航时可以平铺(XY)、上浮(Z)、内嵌(Z),二级导航展示方式还需要考虑容器大兄弟的意见,容器够大就可以选择平铺,容器小就展开收起的交互模式,展开就会有上浮和内嵌的两种形式。

模型抽象的N是随时发生变化,对应的界面设计形态也会发生变化,但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。

只是你知道或不知道,会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。

2. 等价设计

等价设计是帮助用户完成任务的结果是一致的,但过程可能不同,又或者是产品的逻辑结构是一致的,但设计的外在形式有差别。

如图京东购物车的数量添加减少功能是展示出来的,直接可以添加可减少商品数量;但是淘宝购物车的数量是展示结果,修改商品数量需要点击后出现步进器组件。

这两个设计形式就是等价设计,等价设计的好坏需要考虑很多因素,用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理,合适最重要。

3. 同形异构

同形异构是指不同的信息、数据类型设计出相同的外在形式。

微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等,这些消息的数据类型、对象各不相同。

可是外在的结构形式是一样的,这样做的目的是简化、统一,通过图标和头像来区分人、应用、工具的消息差异。

以上总结的界面三重构相关知识、理论、技巧都有其使用范围,那么有没有一种设计方法可以凌驾于界面三重构模型之上呢,答案是肯定的,那就是隐喻设计。

九、隐喻设计

什么是隐喻设计?我们应该怎么去理解它呢?隐喻可以理解为隐含的相似性,它用想象的方式将某一物体与另一物体相联系,并把二者的特征、情感等相互结合转移。

如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》。

隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本,为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。

1. iOS六大设计原则之一

iOS六大设计原则:AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。

Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时(不管基于现实世界还是数字世界),用户学习的更快;隐喻设计在iOS系统中很好的得到体现,因为用户是直接与屏幕产生物理交互的。

用户移动视图来查看更多的内容;拖拽内容;切换开关、移动滑块并且直接滚动来选取值;甚至可以像翻书或杂志一样轻快翻页。

关于隐喻设计还可以用另一个概念来表达,那就是心智模型。因为人类几千年的发展,虽然科技进步很快,外部环境也发生剧烈变化,但是人类的心智进步其实是很慢很慢的。

2. 心智模型

心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的,是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。

心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。

因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。

在产品设计的系统领域,心智模型是指人们对于产品系统的理解,用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。

每个用户将具有不同的思维模式,他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。

心智模型其实是通过学习、感悟不断提升自我认知的过程,还记得我刚开始学习软件时候,如合成软件Photoshop、三维软件C4d。

当我第一次接触这类软件时,感觉整个人摸不着头脑,太多的概念都不清楚,比如通道、图层样式、曲面建模、打灯光、动态图形等。

踏踏实实的去学习这款软件是最有效的方式,通过不断的试错和总结,慢慢的得心应手,这样我们对于软件的心智模型就会逐渐形成。

但是有些心智是和我们生活方式、习惯、文化息息相关的。

日本设计师深泽直人就提出了一种叫做无意识设计的设计理念,又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。

所以设计师需要有好奇心、有共情、有洞见,才能很好理解设计来源于生活这句话。

3. XY情绪

X轴与Y轴的情绪可以从日常生活中找到答案,星巴克、瑞幸的店铺使用了X轴的横向排列,而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。

我们尝试用抽象思维把它们进行图形化,可以表达的更加直观。

星巴克、瑞幸的店铺使用了X轴的横向排列,用户可以看到工作人员不停工作,哪怕需要等待一会也不会很压抑,整个体验过程会给人一种舒适、安逸、闲散。

而肯德基、麦当劳的店面排队使用了Y轴竖向排列,会营造一种热闹的感觉,因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉,买完就走的即视感。

通过对日常生活和物理世界的映射,设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计,比如文本采用横向排列会给用户带来一种平静、舒适的体验。

APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容,这时候内容的好坏、吸引度也是重要的衡量指标。

在信息流的设计中大量采用Y轴,因为Y轴紧张、急促的感觉会让用户下意识的快速下滑,比如微信的朋友圈;抖音上滑来切换视频;直播互动通过大量评论来营销热闹氛围。

4. 隐喻设计

(1)驾驶舱隐喻—APP Tab栏

在前文中提到人阅读浏览的顺序是从左往右,从上往下的。那么应该把重要的东西放置在左边或者上边。

Tab栏作为APP应用的主导航为什么却放置在界面的底部,这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学,哲学的尽头是佛学一样。

日常生活中开车、骑车,手永远是在控制方向和操作,而视线前方就是驾驶员需要浏览阅读的内容,比如行人、马路、车流等。

把驾驶舱隐喻映射到产品界面中,底部Tab栏是引导用户去往哪里,上方动态变化来满足不同用户对不同内容的需求。

(2)问答隐喻—知乎问答

在线下学校的教室里,老师提出问题学生们举手回答的场景,抽象一层其实是一个提问者、多个回答者的逻辑,是一对多的关系。

知乎问答界面就采用了教室的问答隐喻设计,一个问题多个回答。

(3)观看隐喻—B站直播

在电影院看电影时,屏幕在正前方,很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台,也是数以万计的人共同观看一个直播,下面的评论弹幕映射电影院的欢声笑语。

(4)会议隐喻—Zoom视频会议

协同办公领域,在会议室开会是再寻常不过了,会议室开会时能同时看到同事的面部表情,每个同事都可以投屏进行共享会议内容。

Zoom的视频会议软件采用了线下会议隐喻设计,Zoom视频会议支持多人视频讨论,每个人都可以共享屏幕进行实时分享内容。

互联网行业才短短十几年,但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。

当设计产品时遇到问题没有方向时,不妨停下脚步看看人们在日常生活中是如何运作?能不能从生活中吸取灵感。

十、总结

界面三重构给设计师提供一个崭新视角,相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。

从用户体验五要素的视角去看,界面三重构算是从结构和表现层进行挖掘设计的可能性,偏微观层面的设计。

在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。

界面三重构的想法起源于2019年,2020年于Gllue UED团队内部分享,2021在RDD内部分享,整理制作发表于2022年6月。

感谢阅读,很片面,共勉。

作者:水手哥;公众号:水手哥学设计

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

题图来自Unsplash, 基于CC0协议