首页

UI 设计思路:先放飞概念,再落实到产品

涛涛 移动端UI设计文章及欣赏

UI 设计思路应先放飞概念探索多种可能,如将泡泡圈视为独立 APP 进行设计,尝试简约风格、气泡形通知栏、胶囊形头像、实心图标等创新设计,再结合实际落实到产品,比如因开发资源和屏幕显示限制去掉渐变和弥散投影、回归分割线和返回按钮,同时要明确设计与艺术的区别,设计需围绕客观问题解决,概念稿后要提取可用点推动落地,注重用户习惯和跨平台适配,像用爱奇艺 Logo 代替文字返回按钮。

常见的卡片设计如何做的更吸引人点击?

涛涛 设计管理与成长

瓷片区是一种在APP设计中常见的运营位,怎么把瓷片区设计的精致呢?今天教大家4个可复用的
「隐形公式」

APP优秀产品设计亮点

鹤鹤

为什么我想不到这些设计亮点
 
 
 
 
体验目录
 
一、这个隐藏的手势交互你忽略没
二、情感化的背景设计
三、自适应的瓷片区布局
四、考虑用户习惯的导航设计
五、应景的标签设计
六、情感化的心情记录
七、动态感的个人中心设计
八、动态 Banner 更有吸引力
九、有点意思的图标设计
十、营造冬季氛围的背景设计
 
  
 
一、这个隐藏的手势交互你忽略没
 
随着用户体验的不断升级,手势交互变得越发普及,使得产品操作体验变得更有互动感和趣味性。通过手势交互的辅助,让产品设计更加简化,更有利于用户实现操作目标。
 
我们经常用抖音刷短视频,可以通过单击底部标签栏“首页”进行刷新,长按则会弹出模式切换。通过手势交互的辅助可以快速切换单列、双列展示形式,以及刷新首页和默认静音设置,不知道这个操作你发现了吗?
为什么我想不到这些设计亮点
 
 
 
 
二、情感化的背景设计
 
情感化设计可以让产品与用户建立更强的共鸣感,让用户感受到产品的温度,促进对其服务的认可度。
 
在杭州生活的人会经常使用浙里办,在一些节庆、节气等时间段打开 App 时,顶部视觉区域背景会进行应景设计。通过情感化的表达方式营造氛围感的同时,也让用户感受到产品的温度,带来更加温馨的体验感。
为什么我想不到这些设计亮点
 
 
 
 
三、自适应的瓷片区布局
 
瓷片区的灵活性可以方便更多功能模块的布局,也能自由更换和增删处理,只要保障基础框架结构的稳定即可。
 
酷狗音乐未登录时首页推荐板块的瓷片区设计,在滑动过程中会进行自适应布局,方便进行结构的填充和内容的补充。默认时隐藏部分内容可以提高当前位置的利用率,便于提高更多内容的曝光度,交互过程中的动效表达也非常的流畅自然。
为什么我想不到这些设计亮点
 
 
 
 
四、考虑用户习惯的导航设计
 
抽屉式导航是导航设计表达的形式之一,由于属于隐藏式的设计,通常集合非操作频繁的功能。
 
酷狗音乐采用了底部标签栏和抽屉式导航结合的形式,即满足高频功能的便利性,也能集合更多低频功能。由于大屏手机的普及,用户单手操作的习惯各有差异,考虑用户左手或者右手都能轻松打开导航,酷狗音乐右上角的导航图标可以从右侧打开导航,左手贴边向右滑可以从左侧打开导航,满足了不同操作习惯的用户需求。
为什么我想不到这些设计亮点
 
 
 
 
五、应景的标签设计
 
标签设计的表达形式非常多样化,也被运用到众多的场景中,辅助内容的传播与理解等。
 
天气冷了,大家会在淘宝买一些秋冬服装等商品,当搜索秋冬外套、保暖等关键词时,会出现降温坐标、轻暖等标签设计。通过标签突出了商品关键词的特征,也让用户可以感受到季节的变化,促进商品被搜索的概率。
为什么我想不到这些设计亮点
 
 
 
 
六、情感化的心情记录
 
随着生活压力和职场压力的不断增加,为了缓解大家的焦虑情绪,衍生出很多日记类产品,帮助大家记录心情和管理调节。
 
最近在使用心岛日记记录心情时,记录界面设计感觉很有意思。通过转盘的交互形式选择心情,也通过应景的动效表达辅助心情传递,整体设计情感化体验度非常好。
为什么我想不到这些设计亮点
 
 
 
 
七、动态感的个人中心设计
 
个人中心的设计在整个产品设计中都是非常重要的存在,也因此出现了众多优秀的设计方案。
 
心岛日记的个人中心设计中,顶部区域背景以动态的形式表达,描绘出的场景让人心情愉悦。相较于静态画面的表达,动感的设计更能打动用户。
为什么我想不到这些设计亮点
 
 
 
 
八、动态 Banner 更有吸引力
 
Banner 设计在产品中的表现形式也非常丰富,可以在视觉创意中发挥,也可以在造型结构中变化,还能动静各异。
 
最近在使用支付宝时,首页为了突出发放消费券的活动,采用了动态 Banner 设计。突出的视觉和动感的效果,让活动变得特别突出,增加板块吸引力,提高用户参与度。
为什么我想不到这些设计亮点
 
 
 
 
九、有点意思的图标设计
 
随着图标设计的风格越来越多,使得产品设计的感官体验得到了提升,设计师也在不断尝试更多的创意表达。
 
最近在飞猪旅行 App 中,发现其图标设计有点意思。部分图标采用书法里面的连笔形式,结合渐变色使得整体图标风格年轻活泼,设计表达独特而有新意。
为什么我想不到这些设计亮点
 
 
 
 
十、营造冬季氛围的背景设计
 
冬天虽然很冷,但是也有独特的风景带给大家,在寒冷中感受这个季节的独特魅力。
 
飞猪旅行 App 在首页设计中,顶部背景区域结合冬季下雪与堆雪人等元素,以动态的形式营造了这个冬季独有的氛围感。不仅提升了产品的感官度,也让用户更有季节代入感。
为什么我想不到这些设计亮点
 
 
小结
 
设计灵感来源于日积月累,希望我们的产品体验日记栏目可以成为大家积累的来源。本文描述属于个人观点,不足之处大家留言补充。


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY0OTI0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

保姆级UI界面版式设计实用小技巧,你知多少?

涛涛

我为大家整理了非常实用的,实际工作中学来即用的版式设计小技巧,希望你都能读懂、吸收、运用~

如何做好卡片设计

涛涛

在ui设计中,卡片是不可避免需要用到的东西。那么什么是卡片?卡片有哪些类型?
本次就以此问题为出发点,为大家详细介绍ui设计中的卡片设计。

当设计遇上AI—百度APP个人中心AI重构

鹤鹤

前言
 
AI能力的迅猛发展,为产品设计带来了很多新的可能性和机会。百度作为AI领域的行业先锋,正在不断探索如何将AI技术深度融入到产品中,以赋能改进和提升产品的使用体验。
 
本文将以百度APP个人中心AI重构项目为例,讲述如何运用AI智能推荐和对话能力来解决问题重构体验,将一个传统的固定入口型的个人中心打造成为一个高效智能的AI版个人中心。
 
希望能为读者提供新的视角和思路,激发大家对于AI原生设计的理解和思考。
 
 
个人中心旧版
 
作为百度APP端内业务和基础功能设置的重要回访阵地,个人中心面临着三大核心问题:①功能入口多页面屏效低;②部分功能操作层级深;③资产更新提醒不直观。
 
针对这些问题,我们希望通过精简功能结构、破壳高频功能、强化信息提示,提升用户触达效率,优化整体使用体验。为此,我们计划运用AI能力进行设计重构来解决上述三大问题。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
 
个人中心AI重构设计
 
目前行业内并没有一款运用AI能力对个人中心进行重构的产品,因此,设计师的挑战在于如何从0-1创新重构出“AI个人中心”新形态,来全面提升用户在端内的回访体验。我们依次从「框架、结构、内容、操作、对话」五部分出发定义,逐步搭建功能、丰满细节、拓展深度,创新重构出一个全新的AI版个人中心。
 
1.容器创新设计 打造AI感资产框架
 
基于上述问题和设计目标,首先对个人中心框架进行了重构设计,结合用户行为数据保留常用高频功能入口,去除原来众多类型的内容推荐卡,在页面内实现功能精简提效;其次结合AI智能推荐的能力,开辟出一个承载推荐内容的容器区域,破壳内容便于用户回访。
 
我们共计验证推敲出3种页面框架“嵌入式框架”“分层式框架”“卡片式框架”,选择与AI融合感更强、体验更沉浸的嵌入式框架继续深入,框架头部精简信息,中部保留高频功能便于用户回访,下方区域则通过AI智能推送用户所需内容。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
2.结合用户行为 主动智能推荐
 
在框架下方承载推荐内容的容器区域内,个人中心可以结合用户在百度APP的使用行为数据,通过AI向用户智能推荐内容资源和功能操作。
 
当用户的内容资产有变更时,个人中心能够主动破壳内容,如用户最近下载了一部剧集但未看完,当该剧有更新时,主动提示用户继续观看。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
当用户有设置类潜在需求时,个人中心能够推荐操作功能,如用户的手机经过一段时间使用,有系统垃圾冗余时,会主动推荐用户清理缓存。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
3.构建全业务卡片的内容结构
 
我们将各业务需要展示的信息摘取出来,采用卡片形态进行聚合与承接,以保证AI智能推荐时的灵活性和可拓展性。卡片会采用对话式引导语拉近用户距离,破壳提示内容资源,如向用户主动推荐最近收藏的内容,支持跳转查看并在返回时更新状态;还会在资产变更时进行提醒,如当用户下载视频或备份文件后,对用户实时提醒并提供复访入口;支持用户直接设置功能,支持一键点击并实时反馈状态。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
设计期间,我们从卡片分类方式、模板呈现、交互操作等维度进行了多方案探索,前后迭代实验了3款卡片形态,结合用户访谈测试和实验数据反馈,最终选择使用3.0版本的分卡聚合样式。这一版本采用了统一化模版来精简布局,通过一步操作来前置功能减步长,对功能和内容进行分类聚合来提高页面屏效、使用户更易理解。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
共计为20+业务搭建了10类聚合卡片,定义归纳了3类卡片操作与更新方式,在个人中心选用最符合用户行为的卡片和内容进行智能推荐。目前我们更多业务正在接入推荐卡片体系中,大家敬请期待~
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
4.内容破壳提示 功能操作提效
 
回归用户实际使用场景来看,AI智能推荐卡片形式在用户操作上有了很大的提效。例如查看下载视频的步长由4步缩减为1步,原来用户想继续看视频时,可能会找不到、且寻找入口比较深,现在我们通过推荐卡片破壳了视频等内容,点击卡片即可一键直达视频页,一段时间后返回个人中心时卡片会更新用户的最新观看进度。既减少了用户操作步长,又沉浸式延续了用户在端内的使用行为。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
同样,功能类的操作效率也大幅提升,之前当用户想清理时 ,入口深步骤多、体验非最佳,现在通过推荐卡片将清理缓存功能前置推出在个人中心,用户想清理缓存时,无需翻越层层入口,只需点击“清理”按钮即可一键完成缓存清理,实时告知用户清理进度,大幅提升用户操作效率。除此以外,像深色模式、字体大小等功能也都支持用户在个人中心一键操作。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
5.拓展对话场景 触达用户长尾需求 
 
个人中心不仅可以结合用户行为智能推荐卡片,还支持用户主动发起提问,通过对话形式快捷触达长尾需求。用户点击卡片下方的“去提问”入口或上滑页面,即可从个人中心进入对话页。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
进入对话页后,个人中心AI助手首先会推荐一些快捷指令,让用户快速了解对话提问方式和目前支持提问的功能。当用户发起提问后推出相关功能卡片,如在手机运行卡顿时询问“如何清理缓存”,AI助手会推出“清理缓存”卡片并引导用户前往清理,清理完成会再次回到对话页、为用户展示最新缓存状态。
 
以下是支持对话的部分功能卡片,这些卡片整体延续了推荐区域卡片的内容和体验,结合对话交互流程对卡片模版进行了差异化定制。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
最终基于业务功能特点,结合对话交互规范,共计定义了“跳转操作并返回更新”“跳转查看”“当前操作”“当前操作并追加对话”4种交互操作和更新方式。目前我们接入的场景能力尚有限,后续我们将持续进行迭代与优化,提升用户在个人中心进行AI对话的体验。
 
当设计遇上AI—百度APP个人中心AI重构
 
 
 
 
AI个人中心实验上线效果
 
AI版本实验上线后,百度APP和个人中心的关键数据都有了显著提升,带来了正向收益,我们也于今年6月底上线全端,期待大家体验并给予反馈。
 
 
思考与展望
 
如今产品AI化已成为市场发展趋势,作为设计师,如何结合自己的业务,运用AI能力重构产品及体验是一个极具挑战和价值的课题。我们从百度APP个人中心AI重构项目中总结出了一些经验和小tips,在此向大家分享:
 
  •  
    在应用AI技术之前,首要任务是明确其能力范围与显著优势,如文中使用的AI智能推荐能力能够同时满足用户的个性化需求、提升信息获取效率,从而全方位提升用户体验和业务价值。
 
  •  
    我们需要大胆突破、勇于创新,在没有可参考借鉴的产品时应当打破惯性思维,尝试从框架、结构、内容等层面进行全新定义,然后通过持续打磨、深度探索等手段来不断完善产品形态。
 
  •  
    无论是否应用AI,设计底层思维是万变不离其宗的,我们需要始终站在用户视角分析并解决问题,而AI将会是每位设计师的一个趁手工具和灵感中心,它可以给我们更多思考问题的角度,日常工作中我们应当多积累总结然后不断迸发新思考,通过AI这个新工具来解决我们业务的已有问题,向用户提供更好的体验。
 
以上是我们的一些小小心得,希望能为同为设计师的你,在面对AI应用与重构设计时提供一些设计思路和借鉴。
后续,我们将持续聚焦提升个人中心的AI智能感知能力,围绕用户的偏好习惯及当前上下文环境,提供更精准的个性化服务,为用户升级更加智能、自然流畅的AI对话体验,通过结合更多场景逐步打造出一个全方位、个性化的百度APP AI助手,让每位用户都能享受到智能化的便捷与乐趣。
 
 


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTYzMzE4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 

再细心一点,就能看到不一样的设计

涛涛

作为 UI 设计师来说,体验总结是必不可少的日常习惯,灵感的来源离不开对优秀设计的探索。我们会定期为大家带来产品体验日记的分享,对于家族内的小伙伴们也是常态化的要求。

15个著名的设计心理学原理以及在设计中的应用

涛涛

“除非有更好的选择,否则就遵从标准”

为大家详细介绍ui设计中的卡片设计。

涛涛

在ui设计中,卡片是不可避免需要用到的东西。那么什么是卡片?卡片有哪些类型?
本次就以此问题为出发点,为大家详细介绍ui设计中的卡片设计。

日历

链接

个人资料

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

存档