首页

兰亭妙微实战:面对运营活动类需求,交互设计该怎么做?

涛涛 交互设计及用户体验

运营类产品三天两头做活动,每次活动的类型和目标都不一样,交互设计师怎么才能快速理解需求、交出逻辑清晰的方案?兰亭妙微在大量运营活动项目中总结出一套 "套路",今天用一个会员卡激活的案例,把这套方法完整拆解一遍。

兰亭妙微ui设计公司分享:设计原则及组件详解

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享:随着 UI 工程化、自动化开发逐步普及,传统图文版 UI 设计规范仅支持人工查阅,无法被开发工具、编译程序自动识别解析。设计产出与代码实现之间长期存在信息断层,带来规范落地难、还原度偏差、沟通成本高等一系列痛点。

为打通从设计规范到工程代码的完整链路,本文分为两大模块展开论述: 第一部分立足真实项目落地诉求,梳理 B 端 UI 核心设计原则,完整拆解全局规范、通用组件、基础控件的设计逻辑、尺寸约束、色彩规则与适用边界,输出一套严谨可读的人工设计规范,作为标准化文档的内容基础。 第二部分以这套 UI 规范为底座,结合 OpenCode 工具的解析语法、字段识别规则,对设计内容做结构化重构,定义design.md标准化文档的格式、排版与字段拆分,完成人工文档向机器可识别配置文件的转换。借助design.md,OpenCode 可自动读取设计参数,联动生成基础代码与静态资源。

本文基于公司内部《UI 设计规范 V1.0》复盘 B 端组件设计体系。如果把 B 端页面比作建筑楼房,组件就是整套系统的地基。吃透组件底层逻辑与落地约束,是高效开展 B 端设计的前提。

全文从六大设计原则、页面布局体系、字体色彩体系、通用组件规范四大模块展开,适用于公司全部自研产品,作为 UI、产品、前端、测试的统一协作准则,以此实现产品视觉体验统一、提升设计开发效率、降低跨岗位沟通损耗。文中配套规范样例、优化前后对比,直观呈现各组件标准形态与落地效果。

image.png

设计规范目标

  • 保持产品视觉风格统一
  • 提升设计输出效率
  • 减少跨角色无效沟通
  • 使用人群:UI 设计师 / 产品经理 / 前端开发 / 测试工程师

一、UI 六大核心设计原则

整套 UI 规范建立在六项通用设计准则之上,页面布局、色彩运用、组件排布都必须遵循:统一性、易用性、亲密性、对齐、对比、重复,这是界面美观、交互合理的底层基石。

  1. 统一性(Unity) 全产品的视觉风格、配色方案、布局逻辑保持全局一致。不应当为单个页面的局部美观破坏整体设计体系。栅格、色值、字号、组件样式在全项目统一复用,保障体验连贯统一。
  2. 易用性(Accessibility) 交互设计优先精简操作链路,一步可完成的行为不拆分为多步。遵循用户固有使用习惯定义组件行为。例如开关组件切换后即时生效,不再额外增加确认按钮,减少操作负担。
  3. 亲密性(Proximity) 将逻辑关联度高的元素缩短间距,归为同一个视觉模块;关联性弱的内容拉大留白,依靠间距完成页面分区,帮助用户快速识别模块边界。B 端常用的 8px 基准栅格间距,正是亲密性原则的典型落地。
  4. 对齐原则(Alignment) 页面内表单、文本、卡片、各类组件建立统一对齐逻辑,表单标签、输入框有序排布,引导用户视觉流向,提升信息阅读效率,后文表单案例会直观展示对齐优化带来的体验提升。
  5. 对比原则(Contrast) 借助色彩深浅、字号大小、元素粗细构建清晰的信息层级;主色强化核心操作按钮,次要信息降低色彩明度,让用户快速捕捉页面重点内容。
  6. 重复原则(Repetition) 图标、按钮样式、配色、间距规则在页面中重复出现,降低用户的学习成本,让用户能够快速识别同类功能组件。

image.png

二、基础布局规范

布局适配 1920p、1440p、1366p、1280p 主流桌面分辨率,采用24 列自适应栅格系统。主流页面框架分为左右布局、上下布局两种。所有尺寸严格遵循8 像素设计基准(尺寸取 8 的整数倍)。

8 像素设计原则

界面中控件尺寸、内外边距、模块间距优先使用 8px 的整数倍:8、16、24、32px…… 细微场景允许使用 4px(8 的二分之一),尽量避免 5/7/9/13 等非标准奇数像素。

底层原理

  1. 适配多倍图,规避半像素模糊:移动端与 Web 端 @2x/@3x/@4x 缩放,8 的倍数相乘均为整数,避免 0.5px 带来锯齿、发虚;
  2. 可无限二分:8=2³,可以不断向下拆分至 4px、2px、1px,既能做大块模块留白,也可以处理精细细节;
  3. 屏幕兼容性好:绝大多数主流屏幕分辨率可被 8 整除,跨设备、跨端排版对齐效果更稳定。

image.png

两种主流页面框架

(1)左右结构布局

image.png

image.png

左侧导航栏 + 右侧内容区。导航展开状态固定 200px,收起状态 64px;面包屑导航栏固定高度 40px;右侧内容区域跟随屏幕分辨率自适应缩放。

(2)上下结构布局

image.png

顶部导航栏 + 下方内容区。顶部导航栏固定高度 60px,面包屑栏固定高度 40px,下方内容区域自适应页面宽度。

栅格三要素(Margin / Column / Gutter)

栅格系统保障多分辨率下布局一致性,B 端后台优先采用24 列自适应网格,支持 1/2/3/4/6 列自由组合布局。

image.png

  • Margin(边距):内容距离容器左右边缘的留白,项目统一采用 16px /24px,必须为 8 的倍数;计算有效内容区域时,先扣除两侧边距,再均分列宽。
  • Column(列):PC 端固定 24 列栅格,单列宽度随分辨率动态变化,支持多种组合布局。
  • Gutter(列间隔):列与列之间的空隙,全局统一固定 16px。

image.png

文字排版规范

image.png

  • 中文字体:微软雅黑;英文字体:Adobe 黑体 Std
  • 四级固定字号体系,配套对应行高,区分标题‑正文‑备注层级:
    • 12px:备注、次要提示文本
    • 14px:正文、菜单、表格内容
    • 16px:小标题、导航文字
    • 24px:页面一级大标题

色彩规范

image.png

完整色板由主色调、辅助色、中性无彩色三部分组成,一套产品仅设置一个主色。

  1. 主色调 承担品牌识别,高频用于 LOGO、导航栏、核心操作按钮、选中态、重点标签,主导产品整体视觉。
  • 原色:LOGO、导航栏、主要按钮、选中标签、高亮内容;
  • 衍生浅色:标签底色、轻提示模块;
  • 衍生深色:按钮悬浮、点击交互状态;

注意:避免把主色大面积用作页面背景或大段正文文字,维持页面视觉平衡。

  1. 辅助色调 两类辅助色分别适配导航栏背景、表头背景;另外包含成功、警告、错误反馈色,分别用于操作成功、风险告警、错误提示等反馈场景。

    image.png

  2. 文字色阶

    image.png

  • #333333 一级文字:大标题、导航、正文重点;
  • #666666 二级文字:小标题、次级说明;
  • #999999 提示文字:备注、占位、次要辅助信息。

三、通用组件详细规范

B 端组件如同建筑零件,每个组件都要明确定义样式、交互状态、适用场景与边界,避免设计师自由发挥造成还原问题。

1. 按钮

image.png

B 端高频交互控件,分为填充按钮、线性按钮、文字按钮三大类;每种按钮包含:默认、悬停、点击、禁用四种交互状态。

2. 导航组件

image.png

  • 顶部导航:负责产品全局模块分类,承载大模块快速切换、系统公共功能入口;
  • 左侧导航:归属大分类下的子菜单,承载细分页面跳转。 二者互相配合,构建清晰系统层级,提升用户查找功能的效率。

    image.png

3. 面包屑导航

image.png

属于辅助导航,告知用户当前所处页面位置,支持快速回退上级页面,层级之间常用>作为分隔符号。本文采用标签式面包屑,包含静态、移入、当前选中三种状态;标签高度 28px,标签之间间距 10px,外部边距 16px。

4. 分页组件

image.png

多用于表格列表,实现分批次加载数据,降低接口读取压力。分为基础分页、长版分页、简约分页、迷你分页;基础样式建议最多展示 5 个页码,避免数字过多造成视觉混乱;长版用于数据量极大的业务。

5. 下拉选择器

 

  1. 基础单层下拉:平铺选项,适用于简单单选;image.png
  2. 多级树形下拉:支持左右分层、树形层级展示;

    image.png

  3. 下拉菜单(多选标签回显):选中内容以标签回显,超长选项 hover 气泡展示完整文本;

    image.png

  4. 单选 / 多选下拉框:需要控制选项回显文字长度,截断内容 hover 气泡完整展示。

    image.png

注意区分不同交互状态,规避用户误操作。

6. 日期选择器

覆盖单日选择、年份选择、起止时间区间选择。今日日期浅蓝标识,选中日期实心蓝底;区间选择支持单栏拼接、双栏独立布局。

image.png

  • 单项时间选择:蓝色边框标记今日,实心底色代表选中日期;
  • 年份选择器:蓝色边框标记当前年份;
  • 起止日期组合:包含组合样式、独立单分、混合模式。

7. 开关组件

image.png

开关切换后应当即时生效,不要搭配确认 / 取消弹窗。用户心智模型是点击开关直接改变状态,增加确认步骤会混淆生效逻辑,切换后给出即时状态反馈即可。

8. 单选 & 多选框

image.png

场景严格区分:圆形单选框用于互斥选项;方形多选框用于可多选集合。 统一具备三种状态:默认、选中、不可选。

9. 树形组件

image.png

适合展示多层级结构,节省页面空间;缺点在于复杂业务下维护成本较高,选型时需要结合业务复杂度评估维护代价。

10. Tab 标签页

image.png

实现在同一页面内快速切换不同数据集,拓展单页承载能力,偏向导航属性,多用于不同分类数据切换。

11. 输入框组件

image.png

  1. 基础输入框:常规、hover、激活、失焦、禁用 5 种状态;
  2. 联想搜索输入框:输入关键词自动下拉匹配结果,无匹配时展示 “无搜索结果”;
  3. 长文本输入域:常规、hover、激活、字数超限提示状态。

12. 表单组件

image.png

表单标签三种排布方案: a. 标签居左,放置输入框左侧(容易视觉不齐,不推荐) b. 标签居左,放置输入框上方 c. 标签右对齐,放置输入框左侧(推荐 B 端常规表单) 表单内部全部间距尽量遵守 8px 倍数原则,统一对齐逻辑。

13. 穿梭框

image.png

实现两组列表之间数据迁移,左侧选中项移动至右侧,右侧数据也可以回退至左侧,仅做交互视图,原始选项集合保持不变。

14. 文件上传

image.png

  1. 弹窗拖拽上传:文件拖拽至上传区域时,背景切换浅蓝色,给用户明确反馈;
  2. 按钮式上传:上传完成展示文件名与删除按钮,hover 卡片上浮。

15. 文字提示(Tooltip)

image.png

hover 触发,移出消失,不可承载操作;支持 12 个弹出方向,依附于触发按钮。

16. 气泡卡片(Popover)

image.png

点击或 hover 唤起,支持承载大段文本与操作按钮,适合内容较多的浮层场景。

17. 表格

image.png

用于大批量结构化数据展示,支持排序、筛选、搜索、分页、行操作,是 B 端后台的核心容器组件。

18. 警告提示 Alert

image.png

四种固定类型:常规提示、成功、警告、失败。

结束语

以上完整梳理了 B 端 UI 的核心设计原则、布局栅格、字体色彩、全套通用组件规范,明确各组件设计逻辑、尺寸约束、视觉样式、适用边界,搭建一套可读、可落地、跨岗位统一执行的 B 端人工设计规范。

但传统图文规范只能供人阅读,无法被自动化工具解析,很难真正打通设计‑代码的工程闭环。因此,我们会在这套人工规范基础上,对全部规则做结构化重构,适配 OpenCode 识别规则,搭建机器可读的design.md文档,完成从 “人工设计规范” 向 “工程化解析规范” 的升级落地。

 

 

转载:站酷

 

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微案例拆解:APP 交互设计到底在设计什么?

涛涛 交互设计及用户体验

很多人觉得 APP 交互设计很玄乎,其实拆开来无非就是几件事:信息怎么分层、导航怎么选、首屏放什么、操作怎么流转。兰亭妙微在做竞品分析和产品走查时,有一套系统的拆解方法。今天我们用一个实际案例,把 APP 交互设计的门道讲清楚。

兰亭妙微深度思考:交互设计的本质是什么?

涛涛 交互设计及用户体验

做了这么多年设计,我们偶尔会停下来问自己一个根本问题:交互设计的本质到底是什么?是画原型?是定流程?还是让界面更好用?兰亭妙微在项目实践中不断打磨,对这个问题有了一些自己的理解。

兰亭妙微ui设计公司分享:《大厂高手总结!教你 3 个思路,做出更专业的数据可视化设计!》内容总结

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:仪表盘、数据可视化的价值不是单纯展示数字,而是推动业务决策;真正高价值的工作 80% 发生在制作图表之前,图表只是最后 20% 的呈现环节。

image.png

一、常见误区

image.png

很多看板数据准确、图表完整,但看完无法产出后续行动。团队习惯先拿已有的指标做图表,而非先明确业务问题;也会盲目套用 “数据‑墨水比”,一味追求极致简洁,丢掉决策者需要的业务上下文,简洁不是目的,适配场景的合适复杂度才是。 文中用Anscombe 四重奏举例:四组数据集统计结果完全一致,但可视化图形揭示完全不同的数据规律,说明表格数字会掩盖真相,可视化承担解读与沟通的作用;同时举疫情历史气泡图案例,说明合理视觉排布可以让读者先感知重点,再阅读细节。

image.png

二、图表制作前的三大核心维度(80% 关键工作)

1. 明确业务背景:从问题出发,而非从现有数据出发

不要围绕存量指标堆砌看板,先搞清楚要解决什么业务问题。

  • 模糊提问:“看看产品表现”;清晰提问:“找出一季度哪些功能驱动注册用户留存”。
  • 以电商结账流失分析举例:堆全部埋点数据会产出庞杂无效看板;先锁定问题 “用户在结账哪一步流失”,过滤 90% 噪音,漏斗图就能直接定位瓶颈。

先定要解答的业务问题,再确定取数、对比维度,剔除无效信息。

2. 面向受众做差异化设计

image.png

设计复杂度取决于受众的数据熟悉度与业务责任,同一套数据要给不同角色不同视图:

  1. 分析师:需要高密度、可下钻的详细视图,用于深度诊断挖掘问题;
  2. 高管管理者:需要高度聚合的结论视图,快速判断增长、风险与资源方向。

不要一套看板面向所有人,不同角色读取信息的诉求、承担的业务压力完全不一样。

3. 提炼业务洞察,指向行动

区分信息和洞察:信息只回答 “数据是什么”;洞察回答 “该如何判断、调整业务”。

  • 只展示指标下跌只是警报,容易引发盲目救火;
  • 把关联变量一同呈现,定位真实根因,输出可落地的业务动作(哪怕结论是暂时无需改动)。 以预订率下滑举例:指标下降本身只是信号,结合流量、投放活动,才发现是低质量新流量稀释整体转化,问题解决方向从改产品变成调整获客策略。

三、B2B 人才管理 SaaS 实战案例

项目原始需求:把海量用户行为数据展示给企业客户。团队没有直接堆砌图表,落实上面三步思路:

  1. 背景:摒弃单纯 “使用时长” 这个间接指标,选用能力得分、认证完成率等代表真实业务成果的指标;区分普通员工、管理者需要的数据颗粒度。
  2. 受众:普通员工视图偏向自我复盘、规划个人任务;管理者视图优先展示团队整体能力缺口,保留下钻查看个体的入口,二者叙事逻辑完全不同。
  3. 洞察:看板目标从被动输出报表,转向事前预警;衍生出成员指标对比的亮点功能,帮助管理者提前识别风险,主动给员工支持,而非月末事后复盘。

落地效果:平台分析模块周活提升,管理者养成每周查看看板的习惯,平台流失率下降,业务正向增长,用户反馈看板真正改变了管理沟通时机与方式。

四、总结

数据可视化不只是下游图表排版工作,要把 UX 用户体验思维前置到上游架构设计阶段。每一张图表、每一个指标,都要服务于人的实际业务目的,让可视化从被动的数据展示,变成驱动决策的工具。

 

 

转载:优设

 

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微设计细节:错误状态,最容易被忽略的体验分水岭

涛涛 交互设计及用户体验

在 UI 设计中,"错误提示" 看上去只是很小的一块 —— 输入框下方一行红字、弹窗里一段说明 —— 但如果没设计好,它对产品体验的杀伤力远超想象。兰亭妙微在做体验走查时发现,很多产品的核心功能做得不错,却偏偏在错误状态上马马虎虎,硬生生把用户劝退。

兰亭妙微科普:UI 设计、交互设计、UI 交互设计,到底有什么区别?

涛涛 交互设计及用户体验

刚入行的设计师经常被一堆术语搞晕:UI 设计、交互设计、UI 交互设计 —— 这三个词听起来差不多,到底有什么区别?兰亭妙微在招聘和项目协作中也经常遇到这个问题,今天我们从多个维度把这三者彻底讲清楚。

兰亭妙微ui设计公司分享:微信输入框被吐槽丑,可能是在为下一代AI交互铺路

清阳 交互设计及用户体验

最近我发现,微信给输入框加了一圈明显的黑色描边,把语音输入在视觉效果上做了强化。

旧版是这样的。

被人吐槽很多后,又做了一些优化,我的另一个号是这样的样式。

我在群里和朋友圈都能看到不少人吐槽,怎么改得这么丑。

我有一个猜测,微信这次可能又在把大家熟悉的输入框,往下一代AI交互入口推。其实语音输入不仅仅是在输入框这里做了加强,其他地方加的更多。

就像2011年第一次发布的语音版就是按住说话,当时也是把语音这个按钮做的特别强,连文案都一直没变过。

微信内部具体怎么考虑,我现在没在腾讯了,也没啥内部信息。下一代AI入口,是我对这些功能变化的理解。

结合我自己的使用体验,我会觉得,这也许和 AI 时代的输入方式有关。文字本来就是为了记录而发明的,但人与人日常交流最自然的方式,一直都是说话。能语音说清楚的事情,通常就不想再费力写一遍。我自己的输入习惯,也正在往这个方向走。只是受限于环境,不得不看文字。

过去我们依赖键盘,是因为语音识别还不够准确。现在识别已经足够准,再加上 AI 可以帮我们整理和修改,语音终于成了一种真正好用的输入方式。

我现在已经越来越少打字了。

我现在很享受晚上一个人在公司楼下,找个安静的地方,把一天的思考快速说出来,再让 AI 帮我整理。前段时间我是用Claude,也是在那个时候逐渐习惯了这种记录方式。在我的claude被封号之后,突然觉得以前打字其实是一件挺辛苦的事。

说话时,我基本不用看手机屏幕,只要顺着思路往下讲,就能一口气说出很多内容。现在语音识别已经足够准确,转出来的文字通常不用大改,最多让 AI 帮我整合一下就可以了。我之前也跟大家专门分享过这个语音整理的skill,我现在会放在codex里用,也挺好用的。

地址是这个 https://github.com/ColourCloudSky/voice-note-polish ,有需要的话,也可以拿去用。

以前用手机码字的时候,很多时候我有想法了就只能用几个关键词快速记录,之后还要再找时间补充。如果不是有特别强的行动力的话,这个其实挺难持续的。因为你可能会存很多关键词,但却没时间去补。

而且,说话和打字带来的状态很不一样。说的时候,我不会预先考虑太多,往往能把最直接的感受讲出来,思路也更容易自然地往下走。打字的时候,总要一边写,一边斟酌措辞,想着想着思路可能就断了。

以前我为了记得更快,我连双拼都专门学过。双拼确实很快,但现在只要环境允许,我还是愿意直接说。

尤其是在跟人聊天的场景里,语音识别和 AI 结合之后,沟通会越来越接近线下交流的状态。我们像平时一样自然地说话,系统把语音准确转成文字,这个过程会非常方便。

这跟直接给朋友发一条语音消息,还是有区别的。发语音的时候,接收的人需要找时间听完,倍速真的太重要了。语音转文字,再配合整理和修改,才更接近我现在愿意一直用的这套方式。

所以,我说的下一代AI交互入口,具体就是让用户自然地表达意思,系统接着帮助处理这段表达,最后由用户确认结果。

我们还是需要文字,只是有一部分文字,可以不用再亲手一个字一个字打出来。

从这个角度看,微信把语音输入变得更显眼,我能理解它可能想推动的方向。输入框本来就在我们每天交流的路径上,如果它能接住这套新用法,用户就有机会在熟悉的地方慢慢形成新的习惯。

但一种功能能做出来,到大家愿意用,中间还有很多事要做。

一个语音入口藏得太深,有需求的人可能发现不了。把它做得更显眼,确实可以让人注意到它。但输入框也要供那些习惯打字、暂时不想说话的人使用,新增的强调会不会打扰他们,同样需要考虑。

我愿意在公司楼下说话,是因为那里安静,也方便开口。换到不适合说话的环境,或者需要输入一段很精确的内容,键盘依然是必须的。

设计要给不同的输入方式留出位置,让用户根据当下的情况选择。产品看好一个新方向,也得照顾眼前这些真实的使用差别。

如果目的是让人发现语音功能,可以尝试描边,也可以考虑提示文案、入口位置,或者在合适的时机介绍新用法。具体选哪一种,要看原来的问题发生在哪里。

原来没看见入口,和看见了但不知道怎么用,需要解决的事情就不一样。已经会用的人,每次打开聊天还需不需要这么强的提示,也值得继续想一想。

这里需要设计师判断,什么该强调,强调到什么程度,以及用户熟悉之后该怎么办。线条的颜色、粗细、圆角,都会影响它和整个聊天界面的关系。

用户反馈很丑也是很有价值的,它至少提醒了设计师,这个变化让一部分人觉得不舒服。接下来可以继续看看,这个不舒服来自视觉上的突兀,还是使用过程里的不顺手。

入口被看见之后,还要考虑用户后续的操作体验。

还是拿微信这个语音转文字、修改后再发送这个功能来说。

一个按钮设计,拍脑袋想下应该是很简单的,如果一切顺利的话就那么几步,按下去,说话,文字出来了,发出去。

但设计还要处理那些没那么顺利的情况。录到一半想放弃,怎么取消?一个名字识别错了,怎么修改?内容正在处理,用户切走了,回来还能不能接着用?这些都要想好怎么设计。

如果再加上AI整理,还有一个判断要留给用户。它整理后的文字,是否仍然是自己想表达的意思。

重复的语气词可以删掉,但一句话里的犹豫、保留和不确定,有时就是原意的一部分。对这样的输入设计,我会希望修改后的结果容易核对,不满意时也方便重新调整。

尤其是发送这一步,用户需要清楚,自己现在是在录音、修改,还是已经把内容发给了对方。整理得再通顺,也得先让人知道自己准备发出去什么。

这些地方处理好了,用户才有理由继续使用。只让他第一次注意到一个功能,还不够。

一个按钮的描边修改,对UI来说只是最简单的一步,但背后的设计逻辑,都要思考清楚,以及说对用户的体验和对产品的战略价值怎么平衡,需要想清楚才能设计的好。

因为写设计文章的原因,我创建了10多个UI设计群,从以前每天几百条信息聊UI,聊上首页,发作品链接,到现在群里已经越来越少认真聊UI了。大家忙着讨论怎么写Skill,怎么去AI味。

难得一个输入框的改动,又让大家认真说起好不好看,我还挺感慨的。

一个看似简单的输入框设计,却需要考虑这么多复杂的事情。所以,UI设计绝对不像某些人想的那样,就是个画图的。

微信这么多年,UI视觉一直也没咋变化,那按很多人的理解,早就应该把UI干掉了,但其实他们还在,就说明一直都有更重要的东西需要去琢磨,而不仅仅是一个按钮样式。

想要把体验真正做好,真的没那么简单。背后的输入逻辑、用户习惯和产品想推动的方向,都要放在一起想清楚。产品想推动一种新习惯,设计就得把每一次使用里的麻烦处理好。

所以,别再因为看过几个AI视频和演示demo,就说要替代设计师了,优秀的设计师永远稀缺。

 

转载:人人都是产品经理

 

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

兰亭妙微设计手册:UI 设计师必须知道的 19 条交互原理

涛涛 交互设计及用户体验

做交互设计久了,你会发现所有看似 "凭感觉" 的决策背后,都有一套经过验证的心理学和行为学原理在支撑。兰亭妙微在项目中反复参考 Jon Yablonski 整理的 Lawsofux——19 条易于理解、应用广泛的 UX 原则。今天我们把这 19 条原则做一个系统梳理,每条配上一句话的核心解读,方便大家随时查阅。

兰亭妙微设计方法论:交互设计的六大原则

涛涛 交互设计及用户体验

说起 UI 设计,就绕不开交互设计。交互设计定义的是人与系统之间交流的内容和结构,让双方互相配合、共同达成目标。兰亭妙微在多年的设计实践中,把交互设计的底层逻辑归纳为六大原则 —— 可视性、反馈、限制、映射、一致性、启发性。这六条不是空洞的理论,而是我们做每一个项目时的自检清单。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档