首页

兰亭妙微ui设计公司分享:层层拆解|移动端首页的视觉设计实战思路

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:信息聚合类 App 首页承载海量入口、活动与内容,很难走极简路线。尤其国内互联网产品,首页需要抢夺用户注意力;作品集当中,平淡寡淡的首页也很难脱颖而出。但视觉丰富不等于杂乱堆砌,花哨要有章法,热闹更要讲节奏。本文结合大量线上案例,拆解移动端首页的全局规划逻辑与主流视觉处理手段。

一、首页全局视觉规划:建立页面节奏感

image.png

很多首页最后视觉失控,并不是初始方案很差,而是持续迭代中,运营模块、营销组件被孤立添加,只关注单个组件好不好看,忽略页面整体关系,最终打破整体平衡。

错误做法:一上来就埋头抠图标、卡片细节 正确思路:优先做全局规划,管控全页各个模块的视觉权重,搭建完整的视觉节奏。

1. 视觉强度从上至下衰减

image.png

首页首屏是权重最高的区域,页面越往下,信息优先级越低。对应的视觉冲击力,也应当跟随浏览路径逐步减弱。 强视觉、高饱和度、重运营的模块,尽量收敛在首屏上半区;如果下半页出现大量强刺激元素,会抢夺视线,违背用户自上而下的浏览习惯。

image.png

衰减并非一条笔直下降的直线,而是起伏变化的曲线节奏: 高强度模块之间,一定要用弱视觉模块做缓冲过渡,强弱交替排布,这就是平面设计的对比原则,也是决定首页设计成败的核心要点。

2. 管控三类视觉素材:UI 组件、运营物料、内容图片

image.png

完整首页输出,不能只考虑 UI 控件本身,运营 banner、营销插图、业务配图都需要纳入管控,三者共同决定页面最终观感。

  1. 运营素材:营销活动图不能孤立设计,必须服从页面整体强弱节奏,避免局部过于突兀;
  2. 业务图片(商品图 / 内容图):图片本身自带视觉重量,如果不加管控,会打乱已经规划好的页面节奏。

实操技巧:对配图做分级管理。一部分模块使用白底 / 浅底干净素材,一部分模块允许使用带环境背景的丰富图片,以此调节页面的视觉起伏,让图片融入整体界面。

注:具体配色、风格、创意表现,需要结合产品定位与品牌规范做落地,不在本文展开。

二、移动端首页 6 类主流视觉处理方案

在做好全局节奏的前提下,可以通过下面 6 种常用手法,给页面增加视觉表现力,大部分聚合类 App 首页都可以看到这些实践。

1. 顶部氛围背景

image.png

页面头部用品牌色做渐变、弥散渐变,快速烘托产品氛围,支持深色、浅色两种基底。

搭配规则:如果头部用深色强氛围背景,紧随其后的模块就用简约浅色底;头部为浅色,则后续模块可以适当加强视觉表现,形成反差。

2. 功能快速入口

image.png

常规形态是「图标 + 文字」,插画、3D 图标本身不等于过度花哨,依旧可以做到精致简约。 想要提升入口视觉权重,可以将入口卡片化:扩大点击热区,给卡片叠加背景色、背景图,常见于本地生活、小程序业务。

3. 瓷片区布局

image.png

瓷片区本身就是卡片矩阵,最简单的强化方式就是给卡片配置差异化背景色。 不要做尺寸完全均等的平铺排布,通过卡片大小错落、内部排版区分,让瓷片区富有层次,避免呆板。

4. 卡片边框强化

image.png

普通卡片想要突出重点内容,可以借助外框做视觉加持,三种常用手段:异形裁切边缘、彩色装饰边框、特殊样式标题。 依靠外壳提升模块存在感,即使内部内容偏平淡,整体模块也能获得足够关注度。

5. 优惠福利组件

image.png

福利、优惠券模块自带营销属性,视觉强度跟随业务权重动态调整:

  • 低权重:浅底色,只高亮金额数字;
  • 高权重:使用高饱和红、橙底色,完整强化整个卡片,强化营销感知。

6. 底部导航栏

image.png

底部 tab 整体不宜过度抢眼,但可以做局部强调。 重点业务 tab(首页、发布按钮),使用特殊图形、独立底色做差异化突出,既增加细节,又不会让底部导航整体抢夺页面主体内容的注意力。

写在最后

丰富的视觉手法只是工具,切忌一味叠加效果。所有样式都要回到全局视角校验,服从页面的节奏规划。 后续还会继续输出更多移动端组件落地技巧,大家可以留言说出你想要了解的设计话题。

 

 

转载:优设

 

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

 

image.png

兰亭妙微ui设计公司分享:ToB、ToC,最终都要 ToA

清阳 用户研究

兰亭妙微ui设计公司分享:AI 正从问答工具变成能理解目标、规划路径并执行任务的行动者,产品因此多出一类新使用者:AI Agent。面向 ToA 的产品要同时满足人类界面与 Agent 能力接口两套逻辑,设计师的关注点也从“用户点哪里”转向人机交接的权责与协作边界。

过去,我们习惯用 ToB、ToC 来区分产品服务的对象。现在,随着 AI 逐渐从“问答工具”走向“能够理解目标、规划路径并执行任务的行动者”,越来越多的产品会迎来一类新的用户:AI Agent。

ToA(To AI)并不能够直接替代 ToB 或 ToC,也不是在现有产品里增加一个对话框就可以了,它意味着:产品的使用者,正在从单一的人类用户,变成由人类与 AI Agent 共同组成的协作系统。

未来的产品不仅要能被人使用,还要能被 Agent 理解、调用和验证。这也是 ToA 产品设计真正值得讨论的地方。

01 产品逻辑的转变

AI 时代的产品大多会同时存在两套彼此关联的使用逻辑:

一套是面向人类的 UI 界面。

它符合人的认知方式,通过视觉层级、交互反馈和信息组织,帮助用户理解当前发生了什么、下一步可以做什么,以及操作后会产生什么结果。它关注效率,也关注用户的情绪和体验。

另一套是面向 AI 的能力接口。

AI Agent 不依赖页面布局来理解产品,也不会因为按钮更漂亮就更容易完成任务——它使用产品的逻辑与人类用户完全不同。它真正关心的是任务的客观逻辑与所需权限,比如:

  • 当前正在处理什么对象,对象处于什么状态;
  • 系统提供了哪些可以调用的能力;
  • 每个操作需要哪些参数和权限;
  • 操作成功与失败的标准分别是什么;
  • 失败之后能否重试、回滚或切换方案;
  • 执行过程中如何向人类同步状态并请求确认;
  • ……

而上述的这两套使用逻辑并不会割裂开来,因为大多数任务的发起者、责任承担者和最终验收者仍是人类,Agent 可以做规划和执行,却不能获得全部的决策权。

因此,ToA 产品设计本质上是在建设一套结构化的、可验证的权责清晰的能力系统,让人类与 AI 能够在同一个任务中顺畅交接。

02 设计认知的转变

在之前我们最常见的产品交互路径是:

用户点击 → 系统响应 → 用户继续点击

这种情况下,设计师需要做的就是降低用户每一步操作的理解和执行成本。而当 Agent 介入之后,任务路径会发生根本变化:

用户表达目标 →AI 理解并规划 → AI 调用多项能力 → AI 处理分支 → AI 返回结果或请求确认 → 用户审核、调整或接管

这里最大的变化,并不单纯是用户操作步骤变少了,而是产品中的行动权发生了转移,从亲自完成每一步,转向提出目标、设定边界并监督结果:

因此,设计师在 ToA 产品中真正需要关注的不再只是“用户下一步点哪里”,而是“协同性问题”:

  • 谁来根据目标制定计划?
  • 谁可以做出判断?
  • 哪些行为可以自动执行?
  • 出现错误时,谁来发现、解释和纠正?
  • 最终结果由谁确认,责任又如何追溯?

当 Agent 开始替用户行动,交互设计就会逐渐变成一种权责设计。这也意味着设计师需要在设计过程中的建立起四个基础认知:

认知一:人类用户从“操作”转向“委托”

传统产品把功能流程拆解成页面和按钮,让用户一步步完成操作,ToA 产品则允许用户直接表达目标,由 Agent 选择工具、组织步骤并推进任务。这意味着设计师需要重新定义“委托/任命”的体验,比如:

  • 用户委托的是一个明确的目标,还是一个开放的任务?
  • 当目标存在歧义时,Agent 应该先询问,还是基于上下文先做小范围推进?
  • 用户何时能够以何种方式来查看和修改 Agent 的计划?
  • 任务进行到一半时,用户如何暂停、纠偏或者进行接管?
  • Agent 完成任务后,用户如何快速验收,并判断质量优劣?
  • ……

要知道,一个好的委托体验,并不是简单地减少点击次数,而是降低用户在表达目标、理解过程和验收结果上的成本。

如果用户虽然少点了几个按钮,却需要反复猜测 Agent 在做什么、为什么这么做、结果是否可信,那就并没有真正提高效率,只是把原来的“操作成本”变成了新的“监督成本”。

认知二:产品既要“被操作”,还要“被理解”

前文提到过,人类和 AI 对于功能理解的方式是不同的,一个写着“发布”的主题色按钮对人类来说可能已经足够直观,但对 Agent 来说,它还需要知道:

  • 发布的对象是什么;
  • 当前内容的状态是否允许发布;
  • 发布时、发布后会影响哪些范围;
  • 是否需要额外审批;
  • 如果发布失败,能否重试或撤销等。

因此,ToA 产品的底层设计重点还在于规划好:

  • 功能与其所对应的状态模型;
  • 能力与工具的语义定义;
  • 参数、权限和调用条件;
  • 成功、失败与异常的反馈标准;
  • 任务过程中的上下文与记忆;
  • 面向人类的执行记录、说明和结果回执等。

过去,很多复杂性可以暂时隐藏在页面背后,甚至可以由用户凭经验补全,但当 Agent 成为使用者之后,模糊的状态、隐含的规则和不一致的反馈,都会直接变成执行风险。

ToA 的逻辑会迫使产品把过去依赖人类的经验来执行的隐性规则,转化为机器也能理解的显性契约。

认知三:自动化不是“做更多”,而是“定边界”

目前 Agent 依然会出现误解目标、遗漏条件、做出错误判断等情况。因此,ToA 产品不能只追求更高的自动化率,还需要设计一套清晰的自主权分级。比如,我们可以将 Agent 的行动范围由低到高划分为四个层级,分情况应用于不同的任务中:

  1. 建议级:Agent 只进行分析和推荐,不执行任何操作;
  2. 辅助级:Agent 可以生成方案或草稿,由用户确认后执行;
  3. 代理级:Agent 在已有的明确规则和授权范围内自动执行任务;
  4. 自治级:Agent 持续监测并主动采取行动,仅在异常或越界时请求人工介入。

这四个层级可以同时汇集在一个产品中,分别对应不同的功能模块或任务类型。这种分级不应该只是产品后台的配置项,而应成为用户能够感知、控制和自行设定的一部分。用户需要清楚地知道对于某一个功能模块或任务来说 Agent 处于哪一级,并拥有多大的行动权限。

真正成熟的 Agent 体验,不是让 Agent 尽可能多地替人做决定,而是让它在适合自动化的地方足够主动,在涉及风险和责任的地方足够克制;真正高效的自动化,不是消灭人的参与,而是把人的参与放在最有价值的决策节点上。

认知四:信任不是“像人”,而是“可预期”

很多 AI 产品试图通过更自然的语气、更拟人的形象与用户建立信任。但在复杂任务中,用户真正需要的并不是一个语气更像人的 Agent,而是一个行为更加可预测的帮手。

历年来的交互设计经验已经给出一些了结论,这种“可预测”带来的信任感通常来自于四个方面:

  1. 依据可见:不仅给出结论,还能说明参考了哪些信息、为什么这样判断;
  2. 过程可控:用户可以随时随地查看计划、修改方向,并在必要时暂停或接管;
  3. 结果可逆:所有自动执行的行为尽可能支持撤销、回滚和恢复;
  4. 责任可溯:系统能够记录谁做了什么、基于什么判断、产生了什么结果,并能够将责任具体到人。

这也意味着,ToA 产品不能只设计常见的、顺畅的成功路径,还要认真设计哪些不确定的、失败和分歧的路径,也即:

  • 当 Agent 不确定时,它应该如何表达?
  • 当用户不同意时,如何快速调整?
  • 当任务失败时,是重试、换方案,还是交还给人?
  • 当结果造成影响时,系统能否还原完整的决策和执行过程?

这些机制和体验的设计是否完善,决定了用户是否愿意把更重要的任务交给 Agent。毕竟,人类对于Agent的信任,不是建立在它永远正确之上,而是建立在它犯错时仍然可发现、可干预、可恢复之上。

总而言之,ToA 产品并不是一种新的页面类型,而是一种新的产品范式。它要求我们从“如何让用户更顺畅地操作系统”,进一步思考“如何让人类与 Agent 共同完成任务”;从设计一条固定流程,转向设计一套能够持续判断、协商、执行和纠错的协作机制。

未来优秀的产品,不一定是拥有最多 AI 功能的产品,而是能够把目标、能力、权限、过程、结果和责任组织得最清楚的产品。

而未来优秀的设计师,也不只是界面的设计者,更是人与 Agent 之间协作关系、信任机制和行动边界的设计者与定义者。

 

转载:人人都是产品经理

 

 

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

 

image.png

兰亭妙微ui设计公司分享:折叠菜单的图标与点击行为如何统一

鹤鹤 图标设计文章及欣赏

折叠菜单看起来只是标题旁的一枚小图标,却同时承担了告知状态、提示动作和组织内容的任务。Vitaly Friedman 的新文章讨论了不同图标与分离点击行为带来的理解差异。兰亭妙微借这一问题,整理一套面向企业官网和业务后台的评审方法;下面的场景为应用建议,并非原作者对这些产品的测试结论。

兰亭妙微交互设计公司审美积累 | Rezo 房产服务 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

用深色与荧光绿,为复杂找房流程建立清楚的方向。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Rezo 房产服务 App 设计。找房涉及位置、价格、房型与配套,发布房源又需要填写大量属性。
一、项目背景:让多条件决策有条理地展开
面对这类信息密集的服务,界面要帮助用户缩小范围、了解房源,再找到联系或发布入口。Rezo 将筛选、详情、通知与表单组织在统一的视觉系统中。

     

图片1.png

图片2.png

图 1  通知列表与未读状态

通知页用头像、事件说明和时间组成整齐列表,全部、未读与批量处理入口集中在上方。暗色卡片保持轻微层差,荧光色点出关键动作,密集消息也有清楚的扫读节奏。

图 2  多条件筛选面板

租买切换放在顶部,房产类型、发布者与房龄等条件依次分组。底部荧光绿按钮收束整屏信息,各种选项沿用统一形态,让复杂筛选拥有明确的起点与终点。

 

二、设计策略:用鲜明主动作统合复杂信息
①信息架构:筛选条件分组,房源详情逐层展开,发布表单按属性收集信息。②视觉语言:深色背景衬托房产摄影,荧光绿集中提示关键操作;卡片、字段与标签维持一致秩序。

 

Rezo Real Estate Mobile App | 界面细节与设计启发     

图片3.png

图片4.png

图 3  房源详情与联系入口

地图、价格、房屋规格与图片逐步补足房源信息,联系入口位于底部。摄影负责呈现空间质感,数字与标签帮助判断,用户的注意力由整体印象自然转向具体条件。

图 4  发布房源的结构化表单

发布页把房源属性拆成输入框、数量控件和分组标签,长表单因此拥有可读节奏。深色底与荧光按钮延续前面页面的语言,填写任务与浏览体验保持同样的识别。

 

③场景化交互:租买切换、筛选选择和数量调整采用符合任务的控件,详情页保留联系入口。通知中的未读状态与批量处理也有明确位置,浏览、沟通与发布各自拥有清楚的操作重点。

 

三、设计启发:高端服务界面,需要让质感服务于判断
Rezo 的识别来自深色、荧光绿与摄影,使用秩序则来自分组、标签和稳定动作。做房产、汽车或其他多条件服务时,可以积累这种处理:先把决策过程拆清楚,再让统一视觉贯穿每一步。

如有房产服务、租房找房类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

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

 

image.png

兰亭妙微读书札记:用体验设计到底设计什么?

涛涛 交互设计及用户体验

本文作者是一名跨网页、B 端、C 端的 UI 从业者,有感于视觉设计师常常陷入被动执行的困境,通过自学沉淀体验设计知识,分享体验设计的学习路径与核心认知。

兰亭妙微科普:全方位读懂用户体验设计

涛涛 交互设计及用户体验

本文系统讲解用户体验设计的定义、价值、介入时机与完整落地流程,区分 B 端、C 端的差异,强调体验好坏不能靠主观感受,需要数据与用户反馈共同判断。

兰亭妙微ui设计公司分享:搞定 B 端响应式布局,看这一篇就够了

清阳 交互设计及用户体验

兰亭妙微ui设计公司分享:B 端后台系统信息密度高、组件逻辑复杂,完整全量响应式适配成本极高,因此B 端大多采用局部选择性响应式方案,而非照搬 C 端网页的全适配逻辑。本文将从应用场景、参数配置、设计流程到交付规范,完整讲清 B 端响应式的落地思路。

一、先搞懂 B 端响应式的核心认知

网页响应式,本质是页面跟随浏览器窗口尺寸自动调整布局,而非显示器硬件分辨率 —— 用户经常缩放浏览器窗口,而非始终全屏使用,这是 B 端设计的重要前提。

C 端官网内容少,可以做到全尺寸流畅适配;但 B 端系统表格、表单、业务组件繁多,完整适配全部设备的开发成本难以承受。移动端场景,行业普遍选择独立开发,不依赖网页响应式做兼容。

B 端局部响应式,主要覆盖 3 类典型场景:

image.png

  1. 模块宽度自适应:页面整体布局结构不变,模块随窗口缩放改变自身宽度;

    image.png

  2. 多列卡片流动布局:卡片容器根据页面宽度,自动增减展示列数;

    image.png

  3. 组件自动展开 / 收起:侧边导航、右侧信息面板,到达临界宽度自动折叠或展开。

    image.png

补充:表单、详情页这类页面,很多场景直接使用固定宽度,不启用响应式;哪些页面开启适配,由设计师结合业务定义。

二、响应式四步参数配置法

正式设计前,要和开发对齐 4 组核心参数,避免设计稿无法落地。

1. 设定适配边界区间:最小 & 最大宽度

限定页面有效适配宽度范围,过滤极端无价值场景(极窄窗口、超宽带鱼屏)。

  • 常规 B 端:最小宽度≥900px,最大宽度≤2560px;
  • 浏览器小于最小宽度:页面出现横向滚动条;大于最大宽度,内容不再继续放大。

2. 划定响应式生效区域

image.png

不要把侧边导航、顶部栏纳入响应式计算。

  • 上下布局(顶栏 + 下方内容):仅内容区做响应式;
  • 左右布局(侧边栏 + 右侧内容):仅右侧内容区做响应式。

3. 定义栅格 Grid 参数

image.png

以 Figma 为例,针对内容区 Frame 设置栅格 Columns:

  • 列数:优先 24 列,也可选用 12/16/20 列;
  • 列间距 Gutter:从 8px、12px、16px 三档中选择。

4. 设置断点 Breakpoint

image.png

断点就是触发布局切换的临界窗口宽度,按需设置,不是必选项,必须提前和开发确认可行性。 示例:

  • 侧边栏:≤1000px 时导航收起,>1000px 导航展开;
  • 卡片流:900‑1200px 展示 3 列,1200‑1500px 展示 4 列。

三、响应式设计三阶段落地流程

响应式不是单独画一套稿子,而是融入正常 UI 设计的全流程,分为三个阶段:

阶段一:对齐顶级组件栅格

image.png

栅格仅约束页面顶层大组件(仪表盘卡片、模块容器),确定每个顶级组件占据栅格的列数;

重点:栅格只管外层容器,组件内部子元素,不需要强制对齐栅格。满宽组件(表格、表单容器)不受额外影响。

阶段二:定义组件内部适配规则(Figma 自动布局)

image.png

外层容器会随窗口变化宽度,组件内部元素需要约定 3 种基础规则,覆盖绝大多数业务场景:

  1. Fixed(固定尺寸):图标、操作按钮,尺寸不变,做左 / 右对齐;
  2. Fill(自适应拉伸):容器跟随父级空间自动占满;
  3. Hug(内容撑开):文本区域高度随内容自动变化,同时撑开父容器。

复杂组件,例如图表、高级表格,需要提前和开发确认适配方案,再输出设计。

阶段三:输出关键页面多尺寸交付稿

image.png

没必要为全部页面做多套尺寸,筛选核心页面:首页仪表盘、表格页、列表页。 输出小、中、大 3 套宽度效果图,让开发直观理解布局切换逻辑。

不输出效果图、不提前沟通,布局逻辑只能靠开发主观解读,极易出现还原偏差。

四、写在最后

B 端响应式没有绝对统一的标准答案,所有栅格、断点、适配范围,都需要设计师与前端提前沟通确认。B 端追求的不是全设备完美适配,而是在高频使用场景下稳定可用、体验一致。

 

 

转载:优设

 

 

 

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

 

image.png

兰亭妙微UIUE设计公司分享审美积累 | Row 独自旅行 UI/UX 设计

丽洁 移动端UI设计文章及欣赏

把探索世界的松弛感,留在每一次浏览里。

兰亭妙微专注 UI 与用户体验设计,持续关注国内外优秀作品,分享界面设计与交互思路,进行设计审美积累。今天分享 Row,一组围绕独自旅行展开的品牌与 App 设计。目的地发现、旅行记录和个人档案,让出行前后的体验有了共同空间。
一、项目背景:兼顾发现的灵感与回看的秩序
旅行内容需要足够动人,地点、作者与收藏入口也要清楚。Row 让摄影成为主角,用轻量布局承接信息,让风景与功能在同一屏里保持舒展。

图片1(5).png

图片1(6).png

     

图 1  旅行动态内容流

旅行照片占据动态卡片的主体,作者、地点与互动信息围绕图片展开。蓝色动作点缀在白色空间里,重复的照片比例与留白让内容流呈现轻松、连续的浏览节奏。

图 2  个人足迹与照片档案

个人页从头像与发布统计进入照片网格,旅行经历逐渐拼成一份可回看的足迹档案。和动态页相比,网格更强调整理与回顾,同一套色彩因此呈现出不同的使用节奏。

 

二、设计策略:让影像带路,让版式维持节奏
①信息架构:动态采用纵向内容流,个人足迹使用图片网格,两种布局回应不同浏览目的。②视觉语言:白底、冷蓝与圆角摄影保持统一,大幅图片与适量文字共同营造轻盈感。

 

Row Solo Travel | 界面细节与设计启发

     

图 3  配色 字体与旅行影像

这张品牌系统展示将蓝色、文字与旅行影像放在一起,说明界面轻盈感的来源。照片圆角、颜色与字形之间保持协调,品牌气质由此延续到实际卡片与导航。

图 4  路线主题与品牌延伸

这张品牌延伸图用路线标记、交通场景与蓝色物料强化旅行主题。它展示的是品牌表达,与前面的 App 页面互相呼应,让独自出发的主题在功能之外也有鲜明记忆。

图片1(7).png

图片1(8).png

 

③场景化交互:动态里的地点与互动信息帮助理解内容,个人页的统计与分类帮助回看记录。蓝色强调入口在照片周围保持清楚位置,品牌中的路线语言也为旅行主题补充了连贯的识别。

 

三、设计启发:内容型产品的氛围,往往来自稳定的框架
Row 的美感与照片有关,也与图片比例、留白和重复卡片有关。框架越稳定,用户越容易把注意力交给内容。做旅行、生活方式或影像社区时,这种让内容充分呼吸的处理值得积累。

如有旅游出行、旅行社区类 App的 UI/UX 设计需求,欢迎联系兰亭妙微,交流产品场景与设计需求。

 

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

 

image.png

 

兰亭妙微实战:基于用户体验五要素做竞品分析

涛涛 交互设计及用户体验

很多设计师做竞品分析,只截图对比界面视觉,只看按钮、配色,流于表面。这篇文章介绍用用户体验五要素(战略层‑范围层‑结构层‑框架层‑表现层)自下而上拆解竞品,由底层商业逻辑一路穿透到表层视觉,找到竞品真正的优劣势,而不是单纯抄界面站酷ZCO...。

兰亭妙微读书札记:UI 设计中的用户体验设计

涛涛 交互设计及用户体验

很多设计师长期困在视觉美化层面,这篇文章提出核心观点:好看不等于好设计,贴合真实用户场景的体验设计,才是最优解。文章基于《用户体验要素》,结合冰山理论、无意识设计、大量电商案例,拆解从业务诉求到落地界面的完整思考路径。

日历

链接

个人资料

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

存档