首页

设计原则之一致性

前端达人

一、什么是一致性呢?
二、  为什么一致性很重要呢?
三、  生活中一致性的案例
四、  UI设计一致性的体现
五、  交互设计一致性的体现
六、  总结
设计原则之一致性
 
 
一、什么是一致性呢?
一致性的字面意思和使用的场景不同代表的含义也会有区别,这里主要使用在UI/UX设计中。
UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互,以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站,消除困惑和沮丧,并使他们更容易学习和记住如何使用产品。
设计并非孤立的实践。它与其他领域交织在一起,其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。
这一定律的起源可以追溯到 20 世纪早期,当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”,它表明如果不尝试保留信息,信息会随着时间的推移而丢失。然而,他还发现,反复接触信息会极大地影响我们记忆信息的能力。从本质上讲,重复可以强化回忆。
 
设计原则之一致性
 
 
艾宾浩斯的重复实验主要关注学习和记忆的过程,但其影响远不止于此。这让人们认识到,重复的元素更容易被记住,从而引导观众的注意力和焦点。很明显,重复可以用来引导行为和理解。
通过重复颜色、形状和图案等特定元素,设计师可以创造一种统一感和节奏感。这种重复还使设计师能够强调基本元素或信息。
重复不仅仅是一种设计原则,更是生活的一个基本方面。在自然界中,重复以各种方式体现,从雪花的对称性到海浪拍打海岸的韵律图案,从贝壳的螺旋到一年四季的循环。这种自然的重复带来了节奏、结构和可预测性,创造了一种舒适和熟悉的感觉。
人类是自然的一部分,天生就能够识别和响应这些模式。我们的大脑是出色的模式识别机器,我们倾向于认为重复的模式令人感到舒适和熟悉。这种认知特征解释了为什么设计中的重复模式(无论是在数字界面、实体产品、建筑还是营销中)会引起我们的共鸣。
设计原则之一致性
 
 
二、  为什么一致性很重要?
在 iOS 的设计指南中,一致性被视为让设计融入 iOS 生态的关键,它帮助用户在不同应用间建立起一种熟悉感。遵循规范的一致性可以「help your design feel at home in iOS」,保持一致性是为用户带来产品愉悦感的重要方式。
在经典交互设计原则中,「一致性」一直是重要的设计准则。在几乎可以称为「设计师必读」的雅各布·尼尔森的十条可用性原则中,一致性(Consistency and standards)位列第四,原则建议设计者在界面和交互上遵循既定的规则,无论是在应用内部还是跨平台之间。
在具体的执行中,内部一致性通常指应用内应当使用统一的视觉风格和交互语言,相同的功能和操作应该在体验上保持一致。而外部一致性则更强调用户应该遵循平台和系统的设计规范,保持用户在同一平台不同应用间体验的相似性。
一致性在UI/UX(用户界面/用户体验)中非常重要,因为它对于提供良好的用户体验和用户界面的可用性至关重要。下面详细说明一致性的几个重要原因:
 
设计原则之一致性
 
 
1、  用户学习曲线:
一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时,他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑,提高了他们的效率和满意度。
2、  提升可用性:
一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时,他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务,减少错误和迷失,提供更好的导航和流畅的体验。
3、  品牌认可度:
一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格,品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性,从而增加品牌的信任和忠诚度。
4、  用户满意度:
一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时,他们会感到更加舒适和自信。一致性传递了专业和质量的信号,让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度,并促使他们持续使用和推荐你的产品或服务。
 
三、  生活中一致性的案例
设计原则之一致性
 
 
生活中的案例保持一致性的有很多,
a、例如红绿灯,在学习驾照或老师教学时会统一讲解红灯停,绿灯行。
b、向左向右箭头符号的使用,在日常生活中都会保持一致。
c、我们乘坐地铁时,地铁的线路图也会保持一致性,每个站的点大小,文字,到站和未到站以及行驶过的站点都有清晰统一的设计和交互操作。
 
四、  UI设计一致性的体现
 
设计原则之一致性
 
 
1、  颜色
颜色是一种物理现象和感官体验,是光波在人眼视网膜上的反射或吸收所形成的视觉效果。
设计中的颜色选择代表了一个项目的品牌,例如常见的饿了么蓝,美团的黄,京东的红等等,颜色的一致性有助于营造良好的视觉体验,强化品牌形象,提升可用性和无障碍性,最终改善用户的整体交互感受。这对于产品的成功至关重要。在设计时颜色(品牌色)会延续到按钮,图标,字体、标签,背景,banner等模块使用。
设计原则之一致性
 
 
2、  字体
字体是一种特定的文字样式,它描述了文字的形状、大小、粗细、间距等视觉特征。
字体是设计中非常重要的元素之一,不同类型的字体,字体的粗细,有衬线字体和有衬线字体,字体的字重等,这些不一致会造成页面混乱,字体的选择和使用会对用户的视觉体验、信息感知、品牌联系和情感体验产生重要影响。
开发实现上如果字体使用较多,会影响加载速度,没有统一的字体制定规则后期更新迭代也会比较繁琐,造成资源浪费。
 
设计原则之一致性
 
 
3、  图标
图标是一种简化的、具有视觉表现力的符号图形,在用户界面设计、信息传达等领域广泛应用。
在众多APP中,常使用APP的你肯定可以感受到,图标除了准确的表达某个含义,还需要在设计时保持一致性,图标的大小,设计的风格例如线型图标、填充图标、简约图标、立体图标、卡通图标等,如果这些图标风格进行混合使用就会造成混乱,影响用户体验,看起来很不专业也会影响用户使用时对于安全性的担忧。
设计原则之一致性
 
 
4、  按钮样式
按钮是一种常见的交互界面元素,用于触发某种操作或功能。
设计中的按钮有很多样式,因为项目类型的不同按钮样式也不同,按钮的样式有圆形按钮,矩形按钮,圆角矩形按钮,菱形按钮等,同一个项目中建议使用统一的按钮样式,除了可以体现专业性,还可以让用户增加信任度,按钮样式使用很多,用户除了使用体验不友好,还会觉得是不是跳出了这个产品去到了另一个地方。
 
设计原则之一致性
 
 
5、  排版
排版是指在印刷或数字媒体中,对文本、图像等内容进行有规则的布局和格式化的过程。
设计中排版的一致性,使用户能够快速适应和理解界面的结构,降低学习成本,用户对于熟悉的排版模式产生更强烈的归属感和安全感,使内容更易读,用户可以依照熟悉的视觉动线快速找到所需信息,提高信息获取效率。
五、  交互设计一致性的体现
 
设计原则之一致性
 
 
1、  操作一致
根据文字意思就是用户才操作时候的流程保持一致,操作保持一致,例如大家常见的下单购买商品流程,
用户在购买商品时:点击商品——商品详情——付款购买,其他商品也应该是这样流程,
如果每个商品流程不同就会很乱,例如:
点击A商品————商品详情——付款购买;
点击B商品——付款购买——查看商品详情;
点击C商品——同类商品列表——商品详情——付款购买,
这样就会很乱,用户不知道点击下一个商品会是什么样子。
例如:
设计原则之一致性
 
 
1、APP中的视频浏览是上下滑动,进入新的模块后视频浏览变成了左右滑动。
2、需要确认某些操作时,确认按钮一会在右侧,一会确认又在左侧。
用户在操作时会除了体验很乱,也很难培养用户习惯。
设计原则之一致性
 
 
2、  文案符号一致
文案和标点符号的一致比较好理解,例如常见的输入框,“请您输入帐号”,“请输入你的密码”,同一页面场景下文案和称呼不统一,会造成用户操作迟疑,是不是这个不重要才用了“你”,重要的才用“您”,为了避免用户进行不必要的思考文案保持一致,符号亦是如此。
设计原则之一致性
 
 
3、  反馈一致
当我们看到下一步按钮时,有些地方交互是进入了新的页面,有的是分步式使用。建议使用一种保持统一,避免用户产生误导。
操作反馈后的弹窗,相同功能反馈的弹窗样式不一致:一会是图文弹窗,一会纯文字提示,用户也会很乱,包括交互时出现的样式也需要保持一致,剧中或从下向上弹出。
六、  总结
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悦的用户体验。通过保持设计元素、布局和交互方式的一致性,可以降低用户的认知负荷,提高用户的学习效率,增强品牌形象,提升用户满意度,并最终实现更好的业务成果,详细分为以下七点:
设计原则之一致性
 


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

常见的B端弹窗样式设计总结

前端达人

B 端产品的业务场景通常比 C 端更为复杂,因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。
常见的B端弹窗样式设计总结
 
 
弹窗的定义
弹窗是展现在用户操作界面之上的容器,在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出,目的是向用户展示某些信息、提供选择或执行某些操作。
 
弹窗使用场景
  1.  
    需要呈现的内容篇幅相对较少。
  2.  
    常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
  3.  
    通常是由系统触发(用户被动接受)。
  4.  
    弹窗整体高度和宽度不做绝对的标准或规定,可以根据内容篇幅的多少和视觉的平衡度来确定,整体规范保持一致即可。
 
总体概括为简单和复杂两个场景。
 
一、场景简单
场景简单包括:全局提示、气泡确认框、警告提示、通知提醒框,通常是操作确认和系统内部自动触发性提示时使用。
 
1. 全局提示
以 toast 提示居多,通常在页面中间偏上的位置。
常见的B端弹窗样式设计总结
 
 
 
2. 气泡提示
用于解释难理解的功能名词或者由于版面限制文字展示不完,利用气泡来展示。
常见的B端弹窗样式设计总结
 
 
 
3. 警告提示
用于重点内容的警告提醒,降低用户犯错概率,提升用户的使用体验。
常见的B端弹窗样式设计总结
 
 
 
4. 提示性通知弹窗:
位置相对固定,通常出现在需要介绍说明的功能旁边或者居页面中间展示。
例如,当系统发生重要更新维护或者重点功能引导时,可以显示一个提示性通知弹窗,告知用户当前状态。
类型主要包括以下三种:
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
举例:
有赞后台页面
有赞后台页面
 
 
 
二、场景复杂
1. 场景复杂|全屏弹窗
常见的B端弹窗样式设计总结
 
 
 


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

比GIF更好用的Lottie动画是什么?

前端达人

   不知道大家有没有这样的困扰,每次制作GIF图的时候,难免会出现边缘锯齿,就算加上白边之后,在夜晚模式的时候锯齿就更明显了。除此之外,GIF图对于渐变填充的呈现也很糟糕,会出现渐变断层的情况,看起来很不自然。
最让人难以接受的情况是:
        稍微把动画做流畅一些,GIF的文件大小就变得巨大无比。
        在2017年的时候,一款比GIF动画更好用的动画图片格式诞生了!!!
        那就是我们今天将要介绍的Lottie动画。
     
        什么是Lottie动画?
       Lottie动画是一种基于 JSON 的动画文件格式,允许在任何平台上发送动画,就像发送图片一样轻松。Lottie是可在任何设备上运行的小文件,并且可以放大或缩小而不会出现锯齿的一种动画格式。
比GIF更好用的Lottie动画是什么?
 
 
 
相较于其他动图格式,Lottie有哪些优点?
比GIF更好用的Lottie动画是什么?
 
 
①文件大小
和GIF、Apng 或 MP4 等其他格式相比,Lottie 动画要小得多,同时保持相同的动画表现,甚至更流畅。
比GIF更好用的Lottie动画是什么?
 
 
②无线扩展
Lottie动画是基于矢量设计制作的,这意味着可以随意放大或缩小它们,而不必担心分辨率的大小导致的锯齿问题。放大无数倍也是清晰如初。
比GIF更好用的Lottie动画是什么?
 
 
③支持多平台
对于所有开发人员来说,Lottie动画的交接非常简单。现在我们可以在 iOS、Android、Web 和 React Native 上使用 Lottie 动画,也不需要修改。使用和调用都非常方便。
比GIF更好用的Lottie动画是什么?
 
 
④可交互
在 Lottie 动画中,动画元素可以设计为可交互组件,用户可以操纵它们进行交互,实现滚动、单击和悬停等交互效果。这是GIF、Apng和MP4等动画文件都没办法做到的。
比GIF更好用的Lottie动画是什么?
 
 
  怎么设计制作Lottie动画呢?
       目前,Lottie官网提供了很多动效设计软件的插件供大家使用和下载。目前下面这些设计软件可以在官网下载到Lottie动画的导出插件。
比GIF更好用的Lottie动画是什么?
 
 
其中,Lottie Creator是Lottie官方的网页版动画制作工具,登录官网就可以使用。
Lottie官网地址 
 https://lottiefiles.com
比GIF更好用的Lottie动画是什么?
 
 
       说了这么多Lottie的优点,其实Lottie也是有短板的。比如说,AE里面的fx效果,Lottie就全部不支持,另外复合路径动画等等动效效果也不支持。
       为了方便大家快速上手Lottie动画,作者把Lottie支持的效果整理归类成了几张图片,方便大家制作的时候快速查阅。
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 


作者:江浩大叔工作室
链接:https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端后台管理界面设计欣赏

前端达人

在现代企业中,B端后台管理界面设计是提升工作效率和用户体验的关键因素。本文将通过UI设计公司提供的优秀案例,探讨如何优化后台管理界面的设计,提升用户的使用体验。

 

1. 界面简洁,功能齐全

一个优秀的B端后台管理界面,首先应具备简洁明了的设计风格。UI设计公司在设计过程中,通常会通过简洁的布局和清晰的导航,帮助用户快速找到所需功能。例如,蓝蓝设计公司就采用了极简设计原则,在保持美观的同时,确保用户能够高效操作。

 

2. 交互设计人性化

人性化的交互设计是提升用户体验的关键。UI设计公司会根据用户的使用习惯和需求,设计直观的操作流程和反馈机制。例如,通过在重要操作后提供即时反馈,减少用户操作的疑惑和错误。

 

3. 数据可视化

对于后台管理界面来说,数据可视化是不可或缺的一部分。通过图表、仪表盘等可视化工具,用户可以直观地了解业务数据,从而做出更好的决策。UI设计公司通常会使用最新的数据可视化技术,帮助用户快速理解复杂的数据。

 

4. 响应式设计

随着移动设备的普及,响应式设计变得尤为重要。优秀的B端后台管理界面应能够在不同设备和屏幕尺寸下保持良好的使用体验。UI设计公司会在设计时考虑多种终端的兼容性,确保界面在手机、平板和电脑上都能流畅运行。

 

5. 安全性与稳定性

后台管理界面涉及大量敏感数据,安全性和稳定性是设计过程中不可忽视的因素。UI设计公司在设计时会采用多层次的安全措施,保障数据的安全,同时通过优化代码和服务器配置,确保系统的稳定性和高效性。

通过以上几个方面的优化,UI设计公司能够打造出高效、美观、易用的B端后台管理界面,助力企业提升管理水平和工作效率。希望这些优秀案例能为你的设计工作提供一些启发和参考。

 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

PC端的页面设计,如何优雅呈现在移动端

前端达人

电商boss系统采购订单页面在移动端呈现,我做了哪些思考?
PC端的页面设计,如何优雅呈现在移动端?
 
 
在B端UI/UX设计领域,我们常常会遇到类似的需求:随着业务的发展,需要将复杂系统中的核心功能摘出来,并在小程序或移动应用上呈现,以便客户能够便捷地使用和操作,从而提升工作效率。然而,实际操作中我们会发现,尽管对这些功能很熟悉,但是落地过程中却会遇到一系列问题。
 
本文中,将分享我在将复杂电商BOSS系统的订单页面呈现在移动端的设计过程,希望对大家有所帮助。通过本文,您将了解到以下内容:
1、如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯;
2、如何将复杂的订单页面优化为简洁、易用的移动端界面;
3、针对移动端的限制和挑战,如何进行设计决策和权衡;
4、使用哪些有效的UX技巧来提升用户体验和工作效率。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
一、深入分析业务背景和使用场景
1、业务背景关系梳理
选款的零售商客户通过衫海精选款下单后,订单信息和订单状态会传到BOSS后台,相关负责人可随时查看并处理。
PC端的页面设计,如何优雅呈现在移动端?
 
 
2、为什么需要在移动端呈现?
为了确保平台高效履约,需要市场部同事随时掌握订单状态,特别是
发货即将超时、揽收即将超时、发货已超时和揽收已超时
的订单,以便及时通知上下游。但是由于工作性质,他们无法随时坐在电脑面前,所以需要在小程序上呈现订单信息,可以让市场部同事随时查看并处理订单,避免出现订单超时,客户投诉的情况。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
二、功能拆解
1、将电脑端订单内容拆分重组,信息归类
PC端的页面设计,如何优雅呈现在移动端?
 
 
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
2、订单功能拆分后,主要分为以下四个部分
PC端的页面设计,如何优雅呈现在移动端?
 
 
1)订单状态
订单状态包括:全部、待付款、备货中、待收货、已完成、已关闭。全部状态下
新订单、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时
的订单类型需要重点露出,方便快速查询。
  •  
    设计差异:
1、订单状态:电脑端大屏横向可以全部平铺展示;移动端则是横向滑动。
2、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时的订单快捷入口,电脑端大屏可以全部平铺展示;移动端则需要换行,这里不做横向滑动是因为会影响用户的操作效率
PC端的页面设计,如何优雅呈现在移动端?
 
 
2)订单查询条件
订单查询条件包括:订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方、SKU编码、商品ID、是否缺货、所属云仓等等。
  •  
    设计思考:
分析用户日常的使用习惯,对高频操作的筛选项进行提炼在移动端展示,提升使用效率。低频操作则不在移动端展示。
PC端的页面设计,如何优雅呈现在移动端?
 
 
经过与业务方沟通,订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方的使用频次相对较多,
订单编号、时间排序
使用频次最高。
 
a、订单编号/排序时间
  •  
    设计差异:
1、订单编号查询:电脑端和移动端都是直接输入,但是电脑端支持批量查询,单次查询内容会更多。
2、下单时间排序:电脑端采用input框的样式,下拉筛选;移动端是通过点击切换排序方式,操作会更便捷。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
b、商品/供应商查询
  •  
    设计思考:
1、商品查询:电脑端、移动端都是直接输入;
2、供应商查询:电脑端采用input框的样式,下拉筛选;移动端则是进入新的页面进行选择;两者都支持关键字搜索;
移动端不直接展开的原因是:供应商数量多,在当前页面展示篇幅较长,还涉及到分页,会影响用户的操作体验。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
c、时间查询
  •  
    设计差异:
电脑端点击出现时间选择器,支持快捷查询;移动端点击选择跳转到新页面,时间全部铺开展示;两者都支持滑动鼠标(手指)连续选择时间段。
PC端的页面设计,如何优雅呈现在移动端?
 
 
d、订单状态查询
  •  
    设计差异:
电脑端采用input框,下拉选中;移动端则是全部展示出来,采用勾选的方式进行选择。
PC端的页面设计,如何优雅呈现在移动端?
 
 
3)批量操作
小程序不做批量操作功能。
 
4)订单内容
订单内容包括订单编号、下单时间、零售商、商品信息、数量、发货方式、买家信息、订单状态、实收款、订单详情、查看物流。这些内容可以归纳为3类:
a、订单信息 b、商品信息 c、操作。
 
a、订单信息
订单信息包括:订单编号、下单时间、零售商、、发货方式、买家信息、订单状态、实收款
  •  
    设计差异:
电脑端面积大,内容需要散开排列;移动端面积小,内容需要集中排列。
PC端的页面设计,如何优雅呈现在移动端?
 
 
b、商品信息
商品信息包括:商品名称、图片、价格、货号、规格、SKU编码、供应商、下单数量、拿货数量、仓内现货、缺货原因
  •  
    设计差异:
同样的内容,移动端更加聚焦,但是商品数量展示也偏少。
PC端的页面设计,如何优雅呈现在移动端?
 
 
c、操作
操作包括:订单详情、查看物流
  •  
    设计差异:
交互方式相同,都是跳转到新页面。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
三、总结
由于屏幕大小和分辨率的不同,电脑端和移动端页面在功能的布局和信息展示上也会有所不同。
电脑端使用鼠标操作,包含滑动、左击、右击、双击等,相对来说单一,交互效果较少。而对于手机端来说,由于屏幕大小的限制,操作方式需要更加的丰富,通过这些丰富的操作来实现页面和功能之间的交互。所以电脑端和移动端相同功能的操作方式也会不同,组件也有所差异。在做设计时,尽量使用成熟的组件,给用户良好的使用体验。
遇到复杂的设计需求,不要慌张,
核心都是看透事物的本质,拆解为基础的组件,再从根本上解决问题。
谢谢!
 


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

原创作品案例:光谱油气检测软件界面设计

前端达人

 

 

西派特(北京)科技有限公司是研发和制造科学仪器和智能工业仪表的国家高新技术企业,公司总部位于北京经济技术开发区。产品是将光谱与物质物化性质全息智能分析技术相结合,开发制造的快检设备,可快速检测液体、固体、气体物料的多种性质指标。适用于炼油、化工、煤炭、电力、生物发酵等领域。

 

该软件由北京西派特科技有限公司委托蓝蓝设计负责界面视觉设计、交互设计。蓝蓝设计人员通过前期详细沟通,参考大量相关竞品,为其提供四种方案视觉设计。最终双方确定方案一设计风格,后续根据客户提供的原型图及需求完成其他页面设计。

image.png

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

为极端情况而设计

前端达人

前言
为极端情况而设计
 
 
当我们在进行产品设计的时候,设计师会优先考虑理想状况下的各种场景,而理想的用户流程是没有任何问题和障碍的。但是人们很少按照我们期望的方式使用我们的产品。超出预期之外的情况,就是我们通常所说的「边缘情况」,或者说「极端情况」。
事实上,针对不太理想的情况进行设计同样重要。如果没有计划界面如何处理异常情况,整个体验可能很快就会令人崩溃。
作为一名职场中合格的用户体验设计师,避免在工作中遗漏各种边缘情况的考虑,与规避在方案评审的时候会遭到评审会中其他同学的各种diss的尴尬,有时候业内也会将“解决边缘情况问题”的能力作为一个产品经理或交互设计师是否有经验是否资深的一个评判标准。。
所以,
设计方案的完整程度需要看是否有对边缘情况的对应处理方案。
产品设计其实是“向好避坏”并行的设计过程
,向好设计是要追求绝对的好,结合实际情况尽可能保证产品体验的舒适和惊喜,这是产品设计一定要为用户的极致体验需要负责的;避坏设计是相对的坏,结合实际情况尽可能为一些低频场景的极端情况做好容错方案和机制,这就是产品设计中常常提到的边缘情况处理设计。
为极端情况而设计
 
 
为什么要重视极端情况?
针对用户体验中的边缘情况进行设计至关重要,
因为这些特殊场景虽然不太常见,但可能会对用户体验产生重大影响。
通过解决边缘情况,可以确保产品设计能够满足更广泛的用户需求和情况,从而提高可用性、可访问性和用户满意度。主要有以下几个方面的好处:
  1.  
    提高产品质量和可靠性
    : 考虑边界情况可以帮助发现并解决潜在的问题和漏洞,从而提高产品的质量和可靠性。通过深入挖掘极端情况,可以发现在正常使用中可能不会遇到的问题。
  2.  
    增强用户体验
    : 处理边界情况可以确保产品在各种情况下都能提供良好的用户体验。当用户遇到边界情况时,如果产品能够正确处理并给予合适的反馈,用户将感到满意,并且对产品的信任感会增强。
  3.  
    降低风险
    : 不考虑边界情况可能会导致严重的问题,甚至是安全漏洞。通过在设计和开发过程中考虑边界情况,可以降低产品出现故障或安全漏洞的风险,从而减少潜在的损失和责任。
  4.  
    满足法律和标准要求
    : 在某些行业中,产品必须符合特定的法律法规或行业标准。考虑到边界情况是满足这些要求的一部分,因为它们通常要求产品能够在各种情况下都能够安全可靠地运行。
  5.  
    增强产品竞争力
    : 在当今竞争激烈的市场环境中,提供稳健、可靠的产品可以帮助企业赢得用户信任并提升竞争力。考虑到边界情况可以帮助企业开发出更具有吸引力和竞争力的产品。
所以考虑边界情况对于确保产品的质量、用户体验和安全性至关重要,并且有助于降低风险并提高产品竞争力
 
常见的极端情况有哪些
一、文本极限值
处理文本极限值在 UI 设计中是一个重要的考虑因素,特别是当设计涉及到文本输入框、文本区域或文本标签等元素时。以下是一些处理文本极限值的常见方法:
1、限制输入长度。
对于文本输入框,可以设置最大字符数限制,以确保用户输入的文本不会超过预期的长度。这可以通过前端或后端验证来实现,避免用户输入过长的文本。
2、提供字符计数器。
在文本输入框旁边或下方显示一个字符计数器,实时显示用户已输入的字符数和允许的最大字符数。这可以帮助用户了解他们输入的文本长度,并且知道何时达到了极限值。
3、友好的错误提示。
当用户输入超过最大字符数限制时,及时向用户提供友好的错误提示,说明他们已经超出了文本长度限制,并且指导他们如何进行修正。
4、自动修剪或截断文本。
对于一些 UI 元素,可以自动修剪或截断超出限制的文本。例如,可以在显示文本的区域中截断超出限制的字符,并在末尾添加省略号。
5、动态调整输入框大小。
对于可调整大小的文本输入框,可以根据用户输入的文本长度动态调整输入框的大小,以确保用户能够看到他们输入的所有内容。
6、提供预览功能。
在用户输入长文本时,提供一个预览功能,让用户可以在输入之前查看他们输入的文本在 UI 中的最终显示效果,从而避免超过极限值。
7、
多行文本框。
如果用户需要输入大段文本,可以提供一个多行文本输入框,允许用户自由输入任意长度的文本,但也需要在适当的时候提醒用户输入的文本长度限制。
综上所述,处理文本极限值需要综合考虑用户体验和界面美观性,通过设置限制、提供实时反馈、自动修剪或截断文本等方式,以确保用户能够方便地输入和管理文本内容。
为极端情况而设计
 
 
二、空状态
处理空状态是指在应用程序或网站中,当没有数据或内容可显示时所呈现的界面状态。这种情况下,用户可能会感到困惑或失望,因此设计空状态界面非常重要,以提供清晰的信息和引导。
以下是常见的空状态使用场景以及处理建议:
1、
用户主动触发
主要分为「内容被清空/已完成」和「搜索结果为空」两种情况。
1.1、内容被清空/已完成
这种空状态是用户自主删除所有数据或完成了所有任务的情况。一般此类场景不需要进行操作引导,只需要用「插图+正文」或「仅正文」的形式说明情况即可
为极端情况而设计
 
 
1.2、搜索结果为空
当用户搜索关键字后没有对应的结果显示时出现的空状态。此场景需要用「插图+正文」的形式说明情况,并视情况增加行动连接引导用户进行下一步操作,例如:添加、查看等
友好的提示信息: 当搜索结果为空时,向用户显示友好的提示信息,说明搜索未返回任何结果,并且可能提供一些建议或建议用户修改搜索条件。
相关建议或推荐: 在搜索结果为空时,向用户提供一些相关的建议或推荐,以帮助他们找到他们感兴趣的内容。这可以是热门搜索、相关主题、或类似内容的推荐。
为极端情况而设计
 
 
2、
用户被动接受
主要分为「暂无消息/内容/权限」、「初始状态(新手指引)」两种情况。
2.1、
暂无内容/消息/权限
这种情况表示页面暂时无数据的状态,一般情况下使用「插图+正文」的形式,必要时可增加行动连接来引导用户进行下一步操作
为极端情况而设计
 
 
为极端情况而设计
 
 
2.2、
初始状态(新手指引)
对于首次使用复杂流程功能的用户来说,一个新手指引可以帮助用户快速上手,也可以填充原本为空的界面。
除了空状态之外,向用户提供有关如何开始的说明非常有帮助。
教程是让人们轻松了解应用程序功能的好方法。在普通用户界面中使用微妙的动画或提示可以让用户开始执行一些关键任务。
最好的教程是不引人注目的。与其展示超长的视频或幻灯片说明,不如将提示置于体验本身的背景中,这可能非常有效。这有助于用户边做边学,而不是被动地接受大量信息。
仅在必要时才应使用教程。如果您的界面是不言自明的,则可能不需要它。是否包含教程是您需要考虑的设计因素。另一种方法是引导用户直接进入他们的第一个任务,让他们“边做边学”。
为极端情况而设计
 
 
多邻国的这个很棒的示例展示了如何将教程构建到应用程序体验中。它有助于指导用户设置应用程序,并直接进入使用过程。
 
三、
用户和系统的错误
1、用户操作错误
每当发生某种用户输入时,通常都有可能出现错误。考虑一下输入长表单的时候。这些是潜在用户错误的雷区。
即使我们尽力让事情变得直观,也很难完全消除发生错误的可能性,这些都需要在设计阶段进行规划。
有许多不同类型的错误值得我们思考。
验证。
用户没有按照系统期望的方式输入信息。
提交。
出现的问题不是用户的错,但我们需要让他们知道。
内容。
用户请求了我们无法提供的东西。
在设计产品时,您需要考虑可能发生错误的每种情况。然后,您应该为其设计一个状态,以确保系统正常处理该错误。
这可能很耗时,但正是对细节的关注才造就了设计精良的产品。
这里有一些不同的事情需要考虑......
错误是如何出现的。
我们应该使用动画或对比度来吸引用户的注意力。
样式和位置。
错误通知应直观地链接到问题发生的位置。
语言。
错误应该以清晰、用户友好且品牌化的方式编写。不惜一切代价避免“技术演讲”。
明确的解决方案。
在通知用户错误之后,我们还应该提及解决方案。这可能是一条说明,或者是其他可能对他们有帮助的内容的链接。
为极端情况而设计
 
 
输入错误的密码后,该字段会左右轻微晃动(就像有人摇头一样)。这会引起用户对问题的注意,但不会显得突兀
2、系统错误
服务器异常、无访问权限、 网络异常(断网、网速过慢、加载失败、网络连接失败)、浏览器异常、数据出错;
异常状态用来提醒用户发生了未指定的系统错误,需要用户了解此情况,并且提供下一步引导或解决建议,为用户解释异常状态的原因,解决困惑,提供解决办法,引导用户继续产品流程而不是关闭窗口离开
为极端情况而设计
 
 
四、
页面内容过多时的加载方式
还有一种情况就是页面内容过多的情况,这里我们不考虑页面展示只考虑进入页面的加载,大家平时估计遇到过点开一个列表页面,就一直在观看“菊花转”(页面内容加载状态),等的时间如果超过5秒可能就会产生焦虑了,再多点时间直接就和产品说拜拜了,那么这种极端情况一般怎么处理呢?
1、
骨架屏
骨架屏是一个可选方案,也就是说不一定要有,有了会更好。
骨架屏适合页面布局固定的页面,目前很多APP都会使用骨架屏,常用的页面有列表页、详情页等。
一般骨架屏由开发写,如果我们要做骨架屏,需要定义好骨架屏的样式,让开发照着写,骨架屏实现难度我也跟开发同学咨询过,很简单,所以可以放心大胆用。
2、
占位图
占位图应该是许多新人容易忽视的地方,提及占位图就不得不提到加载,为了减少用户感知加载时间,应用加载一般会先加载文字后加载图片,可以缓解用户等待的焦虑情绪。
如果这么做就涉及到一个问题:原本放图片的位置拿什么来占位?
所以就出现了占位图这个东西,当图片还没有加载出来的时候,使用一个占位图进行占位,让用户知道这里是有东西的
占位图一般有带logo的图片和纯色图,如果是加载视频,一般还会在图片上做一个视频的图标,让用户知道这里是视频。
为极端情况而设计
 
 
五、页面上滑处理
当一个页面向上滚动时,页面的元素会发生什么变化,场景的变化有导航栏置顶、标签栏置顶等,这些都是我们需要提前定义好的。
处理页面上滑的交互是指当用户向上滑动页面时所触发的交互效果或行为。这种交互可以增强用户体验,并使用户更轻松地浏览页面内容。以下是一些处理页面上滑交互的方法:
1、导航栏
1.1、固定导航栏
即将导航栏固定在顶部,其余内容上滑,我个人比较倾向于这种方式,当页面比较长的时候可以让用户随时可以看到导航栏,不仅仅是给习惯了导航栏的用户增添一份安全感,更是因为当导航栏有功能入口(比如设置)的时候,用户可以随时看到并随时点击
1.2、内容迁移
这就是一种内容迁移到导航栏区域的情况,这种交互方式不仅能提升用户的操作体验,也能提升产品的数据,比如当关注入口曝光更多,点击关注的概率就会有一定上升。
为极端情况而设计
 
 
2、筛选栏
筛选栏的固定方式也极为常见,很多地方为了用户可以方便做切换,都会把筛选栏固定在顶部,那么这时候就需要我们对交互进行详细的定义。
2.1、第一种是筛选栏本身就在顶部
当筛选栏在页面顶部时:
如果此时我们需要让筛选栏固定在顶部,那么可以这么说明:
页面上滑时,导航栏和筛选栏固定在顶部,其余内容向上滑动。
2.2、第二种是筛选栏在页面中间
这时候有两种情况,一种是筛选栏随页面一起上滑不做固定,另一种是筛选栏需要做固定。具体使用哪种需要视具体场景来定,下面说一下当筛选栏需要固定时我们该如何描述交互。
我们可以以筛选栏为基准
① 当筛选栏位置未到达顶部时
页面整体上滑(一般情况下导航栏当然始终固定在顶部)
② 当筛选栏的位置到达导航栏下方时
筛选栏固定,筛选栏下方内容继续向上滑动
为极端情况而设计
 
 
如何找到极端情况
有些设计师认为,极端情况往往是意料之外的情况,但是实际上,绝大多数的极端情况是可以提前预测的。有两种方法可以帮你找到极端情况:
1、
设计评审。
为了创造出色的设计,你应当主动寻找极端情况。设计评审是一个非常有用的环节,它可以帮助产品团队找到许多潜在的优势案例。在产品设计的早期,就应该进行设计评审。为了获得更好的结果,最好邀请开发人员和其他的团队成员参与此类会议。
2、
使用真实用户测试。
尽早在其他的团队成员的帮助下寻找极端情况是一种很好的办法,但是它不能保证你会发现所有的问题来源。只有在真正的用户进行测试的时候,才能帮你了解用户使用你的产品的时候所面临的问题。同时,值得一提的是,严格且有节制的可用性测试,用户可能会因为经常被指示要做什么而很难暴露极端情况的存在。所以,最好创建一个让用户可以尝试和探索的体系,在灵活的测试和充足的时间下,更容易找到问题。
 
结语
为各种可能发生的情况进行设计
好的设计就是注重细节。
正是这种针对每种场景进行设计的承诺,才使出色的体验与普通体验区分开来。作为设计师,你有责任针对这些边缘情况进行规划。无论您是否为它们进行设计,它们都会发生,所以最好做好准备!
以上仅仅举了几个极端情况的例子,实际上还会有很多,若想尽量覆盖全极端情况,在设计时可以多多思考,将自己切换成“找茬儿模式”,也可以寻求QA同学的帮助,因为他们在写用例时会考虑的更多。即使努力去想可能发生的极端情况,但是有些极端情况还是可能会遗漏,到真正遇到了才知道,不过其实也说明了那些想不到的极端情况可能发生的概率更小。
总之,有些极端情况一定要处理,尽量做到给用户一个好的体验,但是有些情况其实并不需要投入过多精力去思考该如何提升体验,因为本身就不是正常的产品使用场景,只要在发生的时候保证产品可用性即可,因为还有更重要的产品主线体验需要不断去迭代提升。
 


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

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

UI设计公司打造的B端后台管理界面欣赏与优化

前端达人

在现代商业环境中,B端后台管理界面的设计质量直接影响到企业的运营效率和员工的使用体验。本文将带您欣赏和解析由专业UI设计公司打造的几个优秀的B端后台管理界面设计案例,并分享一些优化建议,以提升后台系统的用户体验和功能性。

蓝蓝UI设计公司的杰出案例

在众多UI设计公司中,蓝蓝UI设计公司凭借其卓越的设计能力和丰富的项目经验,打造了多个备受赞誉的B端后台管理界面。其设计案例不仅美观实用,还充分考虑了用户的操作习惯和实际需求。

例如,在一个大型零售企业的后台管理系统中,蓝蓝UI设计公司采用了简洁清晰的布局,结合现代化的设计元素,使得界面不仅美观,还极大地提升了用户的操作效率。通过直观的导航栏和精心设计的图表,用户可以快速获取所需信息,简化了复杂的数据管理流程。

 

优化B端后台管理界面的关键要素

在欣赏这些优秀设计的同时,我们也可以总结出一些优化B端后台管理界面的关键要素:

 

简洁明了的布局

:后台管理界面通常需要展示大量信息,简洁明了的布局可以帮助用户快速找到所需内容,减少操作时间。

 

直观的导航

:清晰的导航结构是提升用户体验的关键。使用固定导航栏或侧边栏可以帮助用户在不同模块之间快速切换。

 

数据可视化

:通过图表和图形展示数据,比纯文本更直观、更易理解。适当的数据可视化设计可以帮助用户快速分析和决策。

 

响应式设计

:确保后台管理界面在不同设备上都能良好显示,尤其是在移动设备上的表现,这对于需要随时随地访问后台的用户尤为重要。

用户反馈机制

:在用户进行重要操作(如数据删除或修改)时,提供及时的反馈或确认提示,可以避免误操作,提高系统的安全性和可靠性。

结语

总之,优质的B端后台管理界面设计不仅需要美观的视觉效果,还需兼顾功能性和用户体验。通过参考蓝蓝UI设计公司等专业设计公司的成功案例,并结合以上优化建议,相信企业可以打造出更加高效、便捷的后台管理系统,提升整体运营效率和用户满意度。

无论是新系统的设计还是现有系统的优化,选择一家经验丰富、口碑良好的UI设计公司都是至关重要的。希望本文提供的案例欣赏与优化建议能为您的B端后台管理界面设计提供一些启发和帮助。

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

PC端的页面设计,如何优雅呈现在移动端?

前端达人

电商boss系统采购订单页面在移动端呈现,我做了哪些思考?
PC端的页面设计,如何优雅呈现在移动端?
 
 
在B端UI/UX设计领域,我们常常会遇到类似的需求:随着业务的发展,需要将复杂系统中的核心功能摘出来,并在小程序或移动应用上呈现,以便客户能够便捷地使用和操作,从而提升工作效率。然而,实际操作中我们会发现,尽管对这些功能很熟悉,但是落地过程中却会遇到一系列问题。
 
本文中,将分享我在将复杂电商BOSS系统的订单页面呈现在移动端的设计过程,希望对大家有所帮助。通过本文,您将了解到以下内容:
1、如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯;
2、如何将复杂的订单页面优化为简洁、易用的移动端界面;
3、针对移动端的限制和挑战,如何进行设计决策和权衡;
4、使用哪些有效的UX技巧来提升用户体验和工作效率。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
一、深入分析业务背景和使用场景
1、业务背景关系梳理
选款的零售商客户通过衫海精选款下单后,订单信息和订单状态会传到BOSS后台,相关负责人可随时查看并处理。
PC端的页面设计,如何优雅呈现在移动端?
 
 
2、为什么需要在移动端呈现?
为了确保平台高效履约,需要市场部同事随时掌握订单状态,特别是
发货即将超时、揽收即将超时、发货已超时和揽收已超时
的订单,以便及时通知上下游。但是由于工作性质,他们无法随时坐在电脑面前,所以需要在小程序上呈现订单信息,可以让市场部同事随时查看并处理订单,避免出现订单超时,客户投诉的情况。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
二、功能拆解
1、将电脑端订单内容拆分重组,信息归类
PC端的页面设计,如何优雅呈现在移动端?
 
 
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
2、订单功能拆分后,主要分为以下四个部分
PC端的页面设计,如何优雅呈现在移动端?
 
 
1)订单状态
订单状态包括:全部、待付款、备货中、待收货、已完成、已关闭。全部状态下
新订单、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时
的订单类型需要重点露出,方便快速查询。
  •  
    设计差异:
1、订单状态:电脑端大屏横向可以全部平铺展示;移动端则是横向滑动。
2、售后中、发货即将超时、揽收即将超时、发货已超时、揽收已超时的订单快捷入口,电脑端大屏可以全部平铺展示;移动端则需要换行,这里不做横向滑动是因为会影响用户的操作效率
PC端的页面设计,如何优雅呈现在移动端?
 
 
2)订单查询条件
订单查询条件包括:订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方、SKU编码、商品ID、是否缺货、所属云仓等等。
  •  
    设计思考:
分析用户日常的使用习惯,对高频操作的筛选项进行提炼在移动端展示,提升使用效率。低频操作则不在移动端展示。
PC端的页面设计,如何优雅呈现在移动端?
 
 
经过与业务方沟通,订单编号、时间排序、商品名称、供应商名称、下单时间、订单状态、履约方的使用频次相对较多,
订单编号、时间排序
使用频次最高。
 
a、订单编号/排序时间
  •  
    设计差异:
1、订单编号查询:电脑端和移动端都是直接输入,但是电脑端支持批量查询,单次查询内容会更多。
2、下单时间排序:电脑端采用input框的样式,下拉筛选;移动端是通过点击切换排序方式,操作会更便捷。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
b、商品/供应商查询
  •  
    设计思考:
1、商品查询:电脑端、移动端都是直接输入;
2、供应商查询:电脑端采用input框的样式,下拉筛选;移动端则是进入新的页面进行选择;两者都支持关键字搜索;
移动端不直接展开的原因是:供应商数量多,在当前页面展示篇幅较长,还涉及到分页,会影响用户的操作体验。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
c、时间查询
  •  
    设计差异:
电脑端点击出现时间选择器,支持快捷查询;移动端点击选择跳转到新页面,时间全部铺开展示;两者都支持滑动鼠标(手指)连续选择时间段。
PC端的页面设计,如何优雅呈现在移动端?
 
 
d、订单状态查询
  •  
    设计差异:
电脑端采用input框,下拉选中;移动端则是全部展示出来,采用勾选的方式进行选择。
PC端的页面设计,如何优雅呈现在移动端?
 
 
3)批量操作
小程序不做批量操作功能。
 
4)订单内容
订单内容包括订单编号、下单时间、零售商、商品信息、数量、发货方式、买家信息、订单状态、实收款、订单详情、查看物流。这些内容可以归纳为3类:
a、订单信息 b、商品信息 c、操作。
 
a、订单信息
订单信息包括:订单编号、下单时间、零售商、、发货方式、买家信息、订单状态、实收款
  •  
    设计差异:
电脑端面积大,内容需要散开排列;移动端面积小,内容需要集中排列。
PC端的页面设计,如何优雅呈现在移动端?
 
 
b、商品信息
商品信息包括:商品名称、图片、价格、货号、规格、SKU编码、供应商、下单数量、拿货数量、仓内现货、缺货原因
  •  
    设计差异:
同样的内容,移动端更加聚焦,但是商品数量展示也偏少。
PC端的页面设计,如何优雅呈现在移动端?
 
 
c、操作
操作包括:订单详情、查看物流
  •  
    设计差异:
交互方式相同,都是跳转到新页面。
PC端的页面设计,如何优雅呈现在移动端?
 
 
 
三、总结
由于屏幕大小和分辨率的不同,电脑端和移动端页面在功能的布局和信息展示上也会有所不同。
电脑端使用鼠标操作,包含滑动、左击、右击、双击等,相对来说单一,交互效果较少。而对于手机端来说,由于屏幕大小的限制,操作方式需要更加的丰富,通过这些丰富的操作来实现页面和功能之间的交互。所以电脑端和移动端相同功能的操作方式也会不同,组件也有所差异。在做设计时,尽量使用成熟的组件,给用户良好的使用体验。
遇到复杂的设计需求,不要慌张,
核心都是看透事物的本质,拆解为基础的组件,再从根本上解决问题。
谢谢!
 
 


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

探索 VR 和 AR 界面设计的美学:欣赏与思考

前端达人

虚拟现实(VR)和增强现实(AR)技术的发展为界面设计带来了全新的挑战和机遇。在这个充满创新的领域中,设计师们不断探索新的美学原则和用户体验,为用户提供更加沉浸式和丰富的体验。本文将通过一些精选的案例,分享一些令人赞叹的 VR 和 AR 界面设计,以及对这些设计背后的思考和启示。

 

1. 空间感的呈现:

在虚拟现实中,空间感是一个重要的设计元素。通过精细的场景设计、逼真的光影效果和流畅的动画,设计师可以打造出令人身临其境的虚拟环境。例如,某 UI 设计公司最近推出的虚拟展览应用,通过高度还原的展览场景和交互设计,为用户带来了仿佛置身于现场的体验。

 

2. 交互体验的创新:

增强现实技术为用户带来了全新的交互方式。例如,一款 AR 应用可以利用手机摄像头和虚拟元素的结合,将现实环境转化为交互式的游戏场景。蓝蓝设计公司的一项 AR 游戏项目就采用了这种创新的交互方式,用户可以在现实场景中进行虚拟物品的收集和互动,增强了游戏的乐趣和参与感。

 

3. 用户体验的关注:

无论是 VR 还是 AR,用户体验始终是设计的核心。设计师们不断优化界面布局、操作流程和反馈机制,以提升用户的使用感受和参与度。在虚拟现实眼镜的显示器上,合理的信息展示和交互设计尤为关键,以确保用户能够轻松地理解和操作。在一些 VR 应用中,蓝蓝设计公司采用了简洁直观的界面设计和自然流畅的交互方式,获得了用户的一致好评。

 

结语:

虚拟现实和增强现实技术的蓬勃发展,为界面设计带来了前所未有的挑战和机遇。通过不断的探索和创新,设计师们正在打造出更加沉浸式、交互式和人性化的 VR 和 AR 界面,为用户带来全新的体验和感受。期待未来,我们将继续关注这个领域的发展,并为之贡献我们的智慧和创意。

 

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

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档