一个互联网产品,是这样从想法变成你手里的产品的——下面按「谁来干这一环」分类,看懂每个角色的行话。
- 产品经理想清楚做什么
- 设计师画出长什么样
- 前后端把它真正做出来
- 测试保证不崩
- 运维让它上线
- 运营让它长起来
- 你 + AI不懂技术也能指挥
- information architecture信息架构 IA把内容「怎么分类、怎么摆」想清楚,就像图书馆把书分门别类上架。架构乱了,用户找不到东西,再好看也没用。
- user flow用户流程图画出用户「从进来到完成目标」走过的每一步,比如「打开→搜索→下单→支付」。提前发现哪一步会卡住、会跑掉。
- prototype原型产品正式做之前的「可点击草图」,用来模拟「点这里会跳到哪」。先用便宜的原型试错,比做完了再改省太多事。
- wireframe线框图只用方块和线画出「东西摆在哪」的骨架图,不上色不修饰。先定布局,再谈美不美。
- fidelity低保真 / 高保真保真度 = 「跟最终成品有多像」。低保真是潦草草图(快、便于改),高保真是接近真实的精致稿(用于最终确认)。先低后高,循序渐进。
- mockup设计稿 Mockup高保真的「效果图」,颜色、字体、图片都到位,基本就是成品的样子。开发照着它还原界面。
- interaction design交互设计设计「用户操作和界面反应」的规则:点按钮有什么反馈、滑动会怎样、出错了怎么提示。好交互让人「不用想就会用」。
- design review设计走查设计稿出来后,团队一起「逐屏检查」:好不好用、合不合规范、开发能不能实现。挑完毛病再交付,减少返工。
- UIUI 界面User Interface,用户「看得见、点得着」的部分——按钮、颜色、图标、排版。UI 负责「好不好看」。
- UXUX 体验User Experience,用户用起来「爽不爽、顺不顺、烦不烦」的整体感受。UI 是颜值,UX 是用着舒不舒服,两者不是一回事。
- design system设计规范把颜色、字体、按钮样式、间距等定成一套「全员通用的标准」,保证整个产品长得像一家人,也让设计和开发不用每次重新发明轮子。
- grid system栅格系统用一套看不见的等宽列(比如 12 列)来对齐内容,就像作业本的格子。东西摆在格子上,自然就整齐、有秩序。
- whitespace留白 / 间距元素之间的「空地」。留白不是浪费,而是让眼睛有地方歇、让重点更突出。挤在一起的界面让人喘不过气。
- visual hierarchy视觉层级用大小、颜色、粗细告诉眼睛「先看哪、后看哪」。标题大、正文小、按钮显眼——用户一眼就知道重点在哪。
- color scheme配色方案一套搭配好的颜色:主色、辅助色、点缀色。配色定调性(活泼/高级/科技),也影响好不好读,是界面的「整体气质」。
- typography字体排印选字体、定字号、调行距的学问。文字占了界面的大半,排得好读起来轻松,排不好再美的设计也累眼。
- alignment对齐【设计四大原则之一】东西的边要对齐在一条看不见的线上。对齐让画面显得「专业、整洁」,乱对齐立刻显得廉价。
- contrast对比【设计四大原则之一】让该突出的更突出:大小对比、颜色对比、粗细对比。没有对比,画面就一团糊、抓不住重点。
- proximity亲密性(分组)【设计四大原则之一】相关的东西放一起、不相关的拉开距离。靠得近的会被大脑自动认为「是一伙的」,分组清楚信息才好读。
- repetition重复(一致性)【设计四大原则之一】同类元素用同样的样式,全程统一。重复带来「一致、可预期」,用户学一次就处处会用。
- fitts law费茨定律目标越大、越近,就越好点中。所以重要按钮要大、要放在手指够得着的地方。手机底部的大按钮就是这个道理。
- hicks law希克定律选项越多,人做决定越慢、越累。所以菜单别堆太多、一次别让用户选太多。「少即是快」。
- millers law米勒定律人脑短期只能同时记住 7±2 个东西。所以信息要分组、分块,别一次塞一长串——电话号码分段写就是这个原理。
- jakobs law雅各布定律用户大部分时间在用别的网站,所以他们希望你的产品「和别人差不多」。别瞎创新基础交互,遵循大家熟悉的习惯反而更好用。
- teslers law特斯勒定律(复杂度守恒)每个产品都有一份「省不掉的复杂」。你不处理,就甩给用户;你多做一点,用户就轻松一点。好设计是「把复杂留给自己」。
- doherty threshold多尔蒂阈值系统响应最好快过 400 毫秒,用户才会觉得「跟得上、不卡」。慢了人就分心、烦躁。这就是为什么加载要做得快、或先给个动画安慰。
- gestalt格式塔原则人脑会自动「找规律、凑整体」:靠近的、相似的、连续的会被看成一组。设计师顺着大脑这个本能排版,用户就觉得「自然、好懂」。
- occams razor奥卡姆剃刀能简单就别复杂,砍掉所有非必要的东西。功能越少越聚焦、越好用。「这个真的需要吗?」是设计师的口头禅。
- error prevention防错原则好设计不是出错后提示,而是「让你压根错不了」。比如删除前先确认、关键字段做格式限制。预防胜于补救。
- feedback即时反馈用户做了操作,界面要马上给回应:点了按钮要变色、提交了要转圈、成功了要提示。没反馈会让人怀疑「我点了吗?坏了吗?」
- pareto80/20 法则80% 的用户只用 20% 的核心功能。所以把精力砸在那最关键的 20% 上,别被一堆「锦上添花」分散。抓主要矛盾。
- aesthetic usability美学可用性效应好看的东西,会被用户「觉得」更好用,也更愿意包容小毛病。颜值确实是生产力——这就是为什么要好好做视觉。
- nielsen heuristics尼尔森可用性原则一套公认的「界面好不好用」的十条体检标准(如状态可见、和现实一致、给用户撤销的机会等)。设计师拿它当checklist自查。