随笔的一些文章

让你的软件产品UI更出色,兰亭妙微助你实现

前端达人

在当今数字化世界中,用户体验和视觉设计已经成为商业成功的关键因素。在这样一个竞争激烈的市场环境中,拥有出色的UI设计策略已经成为企业必不可少的竞争优势之一。因此,选择一家专业的UI设计公司是至关重要的。

作为一家具有多年经验和卓越实力的UI设计公司,蓝蓝设计已经成为了业界的佼佼者。他们的团队由一群充满激情、有丰富经验的专业人士组成,涵盖了用户研究、交互设计、视觉设计等方面,为客户打造出色的用户体验和高质量的产品。

首先,蓝蓝设计注重用户研究。这是UI设计过程中最关键的阶段之一,需要深入了解用户的需求和习惯,才能够开发出适合目标用户的设计方案。蓝蓝设计的团队将用户体验放在首位,通过深入了解用户的行为和思维模式,为客户量身定制最适合的设计方案。

其次,蓝蓝设计在交互设计方面也非常擅长。交互设计是UI设计过程中最重要的一环,它决定了用户与产品之间的互动效果。蓝蓝设计团队注重产品的易用性和可访问性,通过精细的交互设计,为用户提供方便快捷的操作体验。

此外,蓝蓝设计在视觉设计方面也颇具实力。他们深谙色彩、布局和排版等方面的规则,能够创造出独特的视觉效果,并将品牌理念巧妙地融入其中。无论是App设计、网页设计还是平面设计,他们都能够将客户的要求和市场趋势完美结合,呈现出高质量的视觉效果。

总之,选择一家专业的UI设计公司是企业成功的必要条件之一。蓝蓝设计凭借多年的经验和卓越实力,为广大客户提供优质、创新的UI设计服务。如果你正在寻找一家能够帮助你提升产品竞争力的UI设计公司,那么推荐选择蓝蓝设计。他们将为你提供最佳的设计方案,使你的产品在市场中脱颖而出。





优秀的UI设计不仅仅是美观和易用,更需要考虑用户体验、品牌形象以及市场竞争力。如果你正在寻找一家专业的UI设计公司,那么强烈推荐蓝蓝设计公司。作为一家拥有多年经验的UI设计公司,蓝蓝设计在用户研究、交互设计、视觉设计等方面都具备深厚的实力。他们的团队不断探索新的设计趋势和技术手段,以确保为客户提供最佳的设计方案。无论是App设计、网页设计还是平面设计,蓝蓝设计都能够满足客户的需求。与蓝蓝设计合作,你可以获得创新性、高质量和可持续性的UI设计服务,让你的品牌在市场中脱颖而出。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

蓝蓝

偶尔有来咨询的客户会询问:设计需求文档怎么写?给我一个模板吧。

加起来,这样问的客户也不少,所以蓝蓝设计录了一个视频讲解:给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

说说抖音和小红书的交互和界面设计,您更喜欢哪一个?

蓝蓝

 HI,亲爱的宝宝们(小红书上常用的呢称),大家好,小红书和抖音是最近非常火爆的两个视频类的APP,可以说是视频APP中的代表了,不知道你喜欢哪一个?

这两个APP都非常的优秀,所以今天蓝蓝就把这两个APP的主界面都截了一下图,我们从界面和交互以及用户的角度去分析一下他们之间的区别,猜一猜他为什么要这样做?

精进自己、正面思考、调整情绪的三个小方法

蓝蓝

 西藏有一个六时书修行方法,确定要改进的一两个弱点(比如懒惰,拖延),每天分六个时辰反省自己(间隔两三个小时的样子),在每个时间段有好的,不好的念头或者行为都记下来反省总结,以便在下一个时间去调整)和鼓励自己。这个弱点改的差不多了,就继续下一个弱点作为目标去改正。读富兰克林的自传,他基本上也是用这种方法,但没有分每天六次这么细。

蓝蓝设计随笔:ui用户界面中的表格设计

前端达人

蓝蓝设计随笔:ui用户界面中的表格设计

蓝蓝设计 2020-06-10


作者:蓝蓝


表格,是一种最常见的信息组织整理手段,常用于信息收集、展示、数据分析、归纳整理。

      UI软件设计中最常用、最基本的是表格的设计,有些软件中80%都是表格类页面,可以说,设计开发的是否易用,很影响口碑和用户的使用感受。基础的东西一定要做好,就像我们吃的主食一样,虽然都是米和面,但是各地出产各种品种口味都不相同,要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。


一、基础的表格设计美化

      基础的表格可变化的地方很少,可以根据当前软件开发选择的框架控件(ext/vue/jequery不同框架会有一些不一样)做色彩和风格的变化,如:加表格不同粗细的线、斑马格,中间无竖线种种的设计,有的表格需要标题很突出,有的内文突出,这就和内容焦点相关了。

1.png


        为了操作直观便捷,在操作区放一些图标“删除、编辑、审核”,配合文字来使用,有的把操作类的图标放在最左边,有的放在最右侧,按行业用户习惯而定。

2.png

        可以用固定表头(标题位置不变),允许用户排序,单元格内有很长的文字,设定最大字节,多内容用……替代避免转行,有小数点的数字右对齐,每列的大小可调整,这些也是设计开发中可以做好的细节部分。


二、特别宽的表格怎么设计?


        有的表格的宽度,达到了屏幕的两屏和三屏,出现宽宽的横向滚动条,又有长长的竖向滚动条,但工作的人又必须看,可烦人了!很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题:

方法一

        如果表格的标题是可以定制的,允许省略的,可以从业务角度取舍去掉无关紧要的,不常用的内容,把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离:挑选、丢弃、分类、收纳,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可无的?依次排序放在顺手的位置,ui设计的道理也是相通的。

方法二

        如果表格里面的内容是确定的,不可省略的,比如银行的报表就是这么长,这么多,那我们就可以从设计的角度来优化,做一个加高版的表格。

3.png


        表格为什么一组信息只能一行呢?完全可以一组三行四行,在组中进行重点信息,非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则,让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。

方法三

        大表格里面嵌套小表格,利用交互设计,巧安排空间。当用户光标移至感兴趣的那行的时候,关于它更多的内容,在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土,但也确实管用。早年在看某一招聘网站的时候,每一个人的简历只要点名字就可以看到一组关键信息,便于迅速筛选,而另外一个招聘网站,就没有这个功能,每个人都要打开之后才能看见整体信息,我后来就不怎么看那个网站了。多一步操作,对典型用户就多了许多的工作量,网站和软件的使用口碑,用户粘度就是这样在为用户考虑中一点一点积累起来的。

4.png


上图:大表格里面嵌套小表格


        方法不会只有这三种,其他的方法要根据当时的业务,用户使用的习惯、重点,因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量,如果做大的改动或许是巨大的工作量,如果要做变动,一定要在开始的时候就要让ui设计纳入开发体系,一生二,二生三,在前期第一批实施时越注重细节,后期就会越轻松,甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。

         一个系统总是需要业务担当,颜值担当的核心部分,重要的页面要额外的对待、花更多的精力和时间。如果千篇一律,也就不能显示出软件产品的独到之处了。

 

第三 与表格配合的部分设计


第一种  “搜索查询”和“过滤”部分的设计

        大多数表格的前面都有搜索过滤功能,如果搜索条件相当多,可以精选一部分主要的排成一行,其他的隐藏,点箭头再出现。整个搜索区域也可以有隐藏/显示的按钮,来给下面的表格更多的空间。

        过滤条件区域可以定义好“条件名称”一致宽度,一般在八个字左右,避免有的字节多,有的字节少,行数多了,参差不齐,区块和区块之间也要定义好统一的间距,这样整体页面就显得整齐划一、条理清晰。


5.png


上图:搜索和卡片式信息的组合

第二种  表格操作部分的设计

       对表格的操作“导入,导出、批量导出”有的时候这类操作有1020个,有的时候才几个,多的时候很占地方,可以用隐藏的方法,over到表格上再出现,以节省空间。

       也可以分组把同类的操作聚合在一起,把常用的放在目之所及,不常用的点后下浮出现,以节省空间,

还可以光标跟随表格的某一行,点选自动浮出一群小跟班,各种操作按钮。即节省空间,操作移动路径又很短。只是不支持批量操作。

 

第三种  表格和卡片式设计、统计图的整合切换

        表格是可以转换成卡片式设计的,用一个卡片代替一行的展现信息,改变一种阅读的方式。

有的也可以转换图统计图表:曲线图,柱状图让用户直观的去解读,而不必一直看枯燥的数字。

6.png



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务







精致淡雅,“新”拟态 -“新”开端

前端达人


原创艺仁 蓝蓝设计 2020-12-18



       蓝蓝设计一直关注着国际国内创新设计趋势和理念。权威设计平台Behance上最近发布了2021年设计趋势,这次的设计趋势包含了UI、平面、包装等多个领域。

      其中,3D成为2021年的主要趋势,我们在所有的设计类型中都可以找到它。2021年3D的新颖之处在于应用在了UI界面上,而在此之前,UI界面一直被平面设计所主导。即将发布的Mac新操作系统Apple Big Sur也让3D在UI设计中得到更频繁的使用。

1.jpg


2.jpg


3.jpg

      ios14的界面更新将影响所有的UI设计。ios14新推出的Widgets小工具分为大、中、小三种尺寸,用户可以自由布置界面。因此设计师需要设计3种样式的Widgets小工具图标。

4.jpg

5.jpg

       线稿填色这种插画风格的流行在2020年已经初见端倪,在2021年也将继续流行下去。

7.jpg

8.jpg

      近年来3D风靡设计界,有一些精致的插画给我们留下了深刻的印象。简约而配色鲜明的3D插画将成为2021年插画的流行风格之一

9.jpg

       时尚是个圈,70、80年代怀旧风漫画将在2021年重回潮流。这种经典风格的插画特点是使用轮廓、简单的形状和一些细节填充。

10.jpg

       这种风格的插画非常像凌乱的涂鸦,乍看未完成,但所有的细节都是经过深思熟虑的。重叠的形状和强烈的色彩让这些插画与众不同,同时能有效激发灵感。


11.jpg


12.jpg

13.jpg

       VFX或视觉,是将现有的镜头与计算机生成的图像相结合,创造出逼真的场景。随着众多方便友好的软件出现,VFX开始在视频和短片中会变得更加普及。

14.jpg

       3D影响了所有的设计领域,我们甚至可以说,2021年,它主导了几乎所有的数字设计。随着虚拟现实在越来越多的App、网站或软件中的应用,3D也将越来越重要。而设计师们可以将3D和摄影或2D结合起来,创造出一种不同的设计效果。

15.jpg

       动态logo已经出现了好几年了,但现在他们被更多的品牌使用,因此非常值得我们的注意。打开App之后,我们首先看到的就是logo,将logo与动效结合能给用户留下深刻印象,从而更容易记住品牌。

16.jpg

       因为疫情隔离,很多公司开始投资AR技术。在未来,我们可以看到,在人工智能和机器学习的帮助下,增强现实技术将大规模应用于各个领域,无论是医药、艺术、商业、客户服务还是导航。

17.jpg

18.jpg

       排版是设计中最重要的元素,有经验的设计师甚至可以只使用文字排版来设计视觉标识。排版对于建立信息、建立强大的视觉层级、传递信息以及为用户创造良好的体验都很重要。

      大字体和粗体从设计之初就已经存在了,不管采用什么样的设计手法,醒目的大字而且将永远是设计中的一个热门趋势。

19.jpg

       从上世纪初开始,几何形状就已经用于视觉艺术中,尽管这不是一种新的设计趋势,但在2021年的平面设计中,无论是海报、印刷品、包装还是品牌识别,都将聚焦于几何形状。

20.jpg 

       线条艺术充满魅力,并可以在各种设计领域内应用。

21.jpg

22.jpg

       疫情让人们对环境保护格外重视,因此包装行业必须开始采取措施,减少对环境的影响,使用可生物降解的材料。

23.jpg

       经过深思熟虑后设计的独特插画可以为你的品牌故事产生广泛影响。因此你必须谨慎地选择能够传达你的品牌故事的插画。它们必须是有意义,并给品牌带来一致性的。

24.jpg


25.jpg

       在销售产品时,用优质的包装设计讲述有关品牌的迷人故事,能有效激发出购买欲。包装上的所有元素都应该为客户带来独特的体验。

26.jpg

       在人人都离不开手机的时代,包装也可以和手机产生互动,比如使用AR等手段创造品牌知名度。


27.jpg


28.jpg

       权威色彩机构 Pantone 公布了2021年度双流行色:灰+亮丽黄。

       这是继2016年水晶粉+宁静蓝之后,第二次推出组合年度色,寓意光明,传递力量与希望。灰+亮丽黄这两个独立的色彩,联手打造出梦寐以求的色彩组合,像是自然风化的岩石上浮起的日出,带来了一种更深层的体贴和踏实感,同时也表现了对未来充满希望的乐观精神。

       这正是经历过艰难的2020年后,世界所需要的。
29.jpg

       当人们期望寻求能量来强化自己,克服持续的不确定感时,坚实可靠而又热情洋溢的色调,恰好能够满足我们对生命力的追求。

       在过去几年里,潘通的选择充满了社会意义,被看作是对全球情绪的捕捉。

       而在经历了记忆中最黯淡的一年之后,2021年的组合色旨在以坚韧的精神基底传递积极和幸福即将到来的讯息,给人们带来希望,让人感到一切都将变得更加光明。

30.jpg

       目前,已有相关设计产品使用了潘通2021流行色:

31.jpg

32.png

       本文蓝蓝设计着重介绍一个未来可以配合3D设计趋势的全新设计风格-新拟态设计。

33.png

       光是人眼感知世界的媒介,温和柔美的光影变化辅以精致优雅的配色纹理展现出真实世界原本物体的丰富质感。光影的把控影响着事物的情感表达,光影的流转变化传递出不同的情绪,同时也影响人对事物空间感的判断。

34.png

       新拟态是一种图形样式,其原理是通过简单富有层次的光影变化为界面的UI元素赋予真实感。新拟物算拟物风格的一种,只不过表现形式相对特立独行,最早出现在国外网站dribbble上,之后陆续被收录在2020设计趋势预测中,在2019年的年末慢慢被大家熟知,讨论,重视起来。

35.png

36.png

       在2020年2月11号举行的三星视觉发布会使用新拟态的设计手法作为设计海报。带有渐变的浅灰色背景,结合富有层次感的光影渐变,充满未来感。相对克制的色彩选择和多角度的光影变化,强调出产品丰富的质感和科技感,简洁而神秘。

37.png

       这是一款多平台记录工具,有道云笔记的拟物化设计风格相对谨慎,主要的操作按钮部分,均采用了“拟物化的”风格,但是在大面积的展示区域和非功能性按钮依然沿用了简洁的扁平化设计。在保证“新拟物”质感的同时,保证主体内容的可阅读性,和整体页面的清爽感。

38.png

39.png

      蓝蓝设计也在设计项目中结合目前流行趋势进行探索设计,容器元素通过光影的变化,展现出不同的状态,通过模拟物理层面“高程”的不同,形成不同的组件状态,从而演变成承载各式功能的基本元素。

      清晰淡雅的容器元素和扁平活泼的表现层元素在色彩和材质上都形成了鲜明的对比,扁平的图标配以高饱和度的色块或者深色的图片,让界面元素的对比愈发强烈,容器层和表现层的层叠配合,千变万化, 组成界面中的各种模块,让界面版式更为丰富,给人简洁灵动之感。

40.png

      在扁平风大行其道的当下,公众审美难免已经疲劳,设计风格再次回归拟物化,或许已经是主流趋势。未来,3D设计,轻立体设计将与扁平化的设计风格相结合,产生新的设计语言和领域。

      从轻拟物风格到Glassmorphism风格,拟物化设计的演变进程已然开启,未来,无论是3D设计的加入还是扁平风格的延续,“质感”都将成为设计过程中被着重强调的风格。



      蓝蓝设计,工作室2008年开始,2011年正式成立北京兰亭妙微科技有限公司,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UI、UE咨询和设计开发服务。立足UI,一直在学习进步。
      蓝蓝设计,秉承设计优秀,不断超越的理念,诚信敬业、专业耐心的工作作风,进行设计服务创新,帮助企业进行软件和互联网产品的界面设计及开发升级,提供卓越的解决方案。对软件界面用户体验与交互设计与实现,国际化标准和流行趋势,进行不断的研究和实践,拥有丰富的解决问题经验。


42.png


欣赏更多界面及其它作品请访问
www.lanlanwork.com




蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI经验:软件首页怎么设计?

前端达人

原创 蓝蓝 蓝蓝设计 1月1日


      蓝蓝设计是一家做UE/UI设计的公司,我们常常接到的项目是大屏、pc端、手机端的项目要重新做交互设计和视觉设计。每个软件首页怎么设计?如何进行首页上的内容取舍,最终客户和上司是究竟想要什么?是客户们(产品经理或技术总监)普遍感到为难的地方,希望有外部的专业设计力量来参与意见,多一份力量。

一般进行软件首页的设计,我们先思考:

  • 首页要放什么内容?哪些是核心的,用户最在意、最常用的。

  • 软件产品提供什么样的核心价值?

  • 用户常用的功能是哪些?

  • 未来1到3年软件会增加什么重要的功能?发展方向?

  • 需要借助软件产品传达哪些企业价值观?

  • 在交互上和需求上先和软件公司做一些交流,双方达成一致再进行。

      我们也了解到,有许多软件公司做这件事情(开发运营这个软件或网站)已久,特别想找一个崭新的方式去看待目前做的这件事。找个靠谱的外部设计公司和做用户调研是两个好方法。
      我们建议如果时间充许的话,可以做做用户调研,做8到10个用户不同角色的访谈,从真正的客户的角度去思考一下不同角色对这个产品的期待和理解。(访谈的人不用太多,因为太耗时间,但是可以多轮,一段时期一段时期不断的去了解用户的想法),从一线了解许多不同层次的想法和使用者的意见。
      在和客户的交流中,常常会遇到:改版会带来多少程序方面的工作量这类的问题。这个担心很多公司,特别是十年来在一直做着同一个产品的经理们普遍反映都有,特别是很大型的软件。
      其实,下决定最难。
      改版与否,其实取决于对空间秩序美的忍耐度及它能带给你的价值。
      就像有的人房间很乱,也不收拾,特别能忍。他省了整理的时间,但他个人可以找到自己的东西,有自己的内在逻辑。但表现在工作上就是:界面很乱,除了开发者自己,客户都找不到东西,很难使用,花了客户很多时间去学习使用这个软件,到了忍无可忍,客户提出强烈不满的时候,有可能危及到合作时,在吐槽中被迫进行。
      优势技术不等于优势产品,产品的需求和体验要先于技术和模式而存在,品牌的战略贯穿在企业的全链条中,以用户可以感知的点滴来诠释软件产品核心价值,塑造品牌
      UI的设计能带来的不仅仅是软件的美化,UI咨询公司能带给客户的是一种思考的方式和解决问题的行动力。软件企业最好当然是掌握市场先机,企业内部里去触发、驱动  ui咨询类项目,在机会来了的时候才更从容。
      对不熟悉的事情,大家总是会有一定的压力,表现的行为方式上就会有点拖延,选择决策困难。我在想,有时候我们的界面设计时间总是被挤压的特别少,在功能都实现的情况下才来进行,是不是也是出于客户的这种心理呢?
      其实对于我们这样一个做了界面设计十多年的设计公司而言,这些都是我们平常日常工作中的工作,没有什么难点,只是要根据不同的公司,不同的产品去梳理清楚、理解业务,用心体会。
      做好整个系统的交互设计,首页的内容布局设计,和进行一个家庭的空间物品归纳整理没有什么区别。不要陷入“要么不做,做就做到最好的”极端思维,只要马上迭代改进,平时保持一定的水准,总会做的越来越好。
家庭装修和软件界面设计的对比:
家庭要装修
1. 首先要考虑到家庭的空间有多少人要去使用,住几个人?空间之间的最佳行动路径。未来几年内人口会增加或减少吗?住多久?
2.了解你和家人所需要的物品,对它们进行分类和预算了解,无用的物品断舍离。
3. 物品的使用场景在卧室里用,还是在客厅里看电视的时候用?服装的装搭是出门见客还是家居服,有多少件?对客户来讲最看重的是书柜还是衣帽间设计,还是厨房呢?因人而异,选择对他最重要的物品和场景,好好的设计,创造最让人感动的体验。
apjpk-4pjoz.jpg
交互设计有点像居室空间的规划
        这和产品的软件界面设计其实是相通的:
1. 了解就是这个系统有什么功能,准备放到几个导航菜单中?导航之间的最佳切换路径。产品核心提供什么样的价值?未来1到3年软件会增加或减少什么重要的功能?产品未来的发展方向?这版用多久,多久改版一次?
2. 把所有的功能进行分类和预算,分版本陆续实现。断舍离软件功能,进行取舍归纳。最常用的,重要的先做,花费精力太多,又很少用的功能舍掉或后做,
3. 了解每一个功能的使用场景,是什么用户角色使用?是在户外或者室内用?是日常工作时还是领导视查,开会时使用?他最关注什么?他的使用过程是什么?
      了解每一个功能的使用场景和用户关联时,可以画出一个用户体验地图帮助梳理思路。从使用这个软件产品的开始到结束,不同接触点,关键点列出来,选择最需要改善的几个重点,好好的设计开发,创造最让人感动的体验。
apobm-0g27q.jpg
      有了要表达的界面元素,把它们按照人类的使用习惯去组合,进行这些页面的内容的排列方式就可以了,比如:
  • 重要的内容放在第一屏重要的地方,按照人类的阅读习惯,从左到右,从上到下。重点的字大区块占比大,非重点的弱化小字,归纳为一组,可隐藏。
  • 用好对比,不要让人思考,该提示的地方要提示(直接打开页面时弹出或在需要提醒的位置附近,一个地儿一个地儿轮播闪现都可以),尽量傻瓜式的,不要让人培训后才懂怎么使用(节省用户时间)。
  • 思考用户第一次进入软件,如何引导他使用的流程和步骤,并在首页就能开始第一步。(目前B端的产品常见问题就是功能横向单一,每个功能一个菜单,之间缺乏串连使用的路径,用户根本不知道如何使用)
  • 如果是工具类的操作软件,在首页要给足相应的操作辅导文案和视频。如果是办公任务类软件,在首页要很明确展示要做的总数、待办具体事情,想了解的信息。
      空间(交互)布局设计好之后,易用性就基本已经解决了。
      剩下就是根据用户不同的审美,巴洛克,简洁风,欧式,美式(简约,科技感,质感,时尚、拟物,酷炫,奢华高端,品牌VI、拙朴古风),任客户选择,或者是根据用户画像的调查去推测,根据产品定位,建立色彩情绪板,研究出这个产品应有的外貌。
      我们蓝蓝设计一般是有一个UI设计调查表,把各种设计风格和问题列出来,引导客户在填表的过程中去选择和思考。
       步步分解之后,工作就会好理解并逐渐轻松。
      只要您去做这件事,开始思考,最终就会知道界面那些功能该怎么摆放。我们的交流中往往发现客户是非常有智慧的,一开始可能没有想法,随着分析和思考的深入,灵感受到启发,等到我们设计出方案之后,很会挑方案,能够感受到不同方案的优点,把他们集中在一起。
      最近流行一个新的职业,叫收纳整理师,就是帮助陪伴您收拾家。不仅仅是打扫卫生,还会告诉你一些断舍离取舍原则。原有的衣柜空间有什么不足,改进的方法,一些方便收纳的小工具,手把手教你各类叠衣服的方法。有些工作(整理房间)自己也能做,但是这个工作太枯燥,工作量又很大,如果有人陪,就能够被鼓励着,开心,很有成就的去完成。
      陪伴这个词很重要,代表着共同参与,相伴成长。

avz1k-b5io7.jpg

      我觉得交互设计师也是在做整理收纳这种事情。有些人最喜欢的买买买,买回了太多的东西,又无处安放,屋子变得很乱,开始收纳整理,像不像软件开发中一些客户角色,喜欢加一些内容(功能)?这个页面加一点,那个页面加一点,过了一阵子,这个软件(网站)就变得不成样子,需要维护和整理。
       软件产品和一个家一样,他们都是你创造的,如果可以说话,他们可能有许多话想对你:“把我创造的美一些,整洁一些吧,主人
      下面给大家展示几个实际的案例,我们是怎么从需求到原型,完成这项工作的,设计前后的效果如何?
asm0e-r1gcl.jpg
      就拿我们最近合作的江苏锐创来讲吧,这是一家非常优秀的公司,江苏锐创数据中心服务管理平台项目,产品迭代速度非常快,公司内部做过很多版本的设计,由于十年来一直在做这套软件,产生了审美疲劳,不知道到底要怎么做才合适了。各种之前想过的东西都已经自己练过了,也实施过了,但就是觉得没有达到自己理想的状态,内部设计了一稿又一稿,总是觉得还不够好。
      使用这个软件的用户是企业中的网管和工程师,专业人士。在委托蓝蓝设计之前,内部开发已经迭代四次,企业内部的交互设计师已经把首页要放的内容思考的比较清楚了。在这类的需求中,蓝蓝设计的设计师主要的工作是优化视觉设计和进行交互设计的局部优化处理,通过友好的交互体验让企业用户享受到高品质的服务。
客户给的原型图

a3r1n-6agy9.jpg设计后的效果图

aniwl-8inwf.jpg

1. 理解用户所需,优化交互,增加部分内容。告警事件除了原型中的时间线按顺序发生外,加了用户头像,已处理、待处理、紧急任务统计数字,让用户可以总览全局,做到对工作量心中有数。

a3s8x-ilo2u.jpg


2. 数据中心信息,秉承着信息简单易懂,界面引导友好的理解,把信息分组,4个关键信息总数并列2排,设计了相应的拟物化图标,美观整理有秩序。在线和离线位数增加了表达当前比例的横向柱状图,用户从绿色和红色的区块长短中可以轻松感知,比原型的表达方式又多了一个纬度。

au0ez-pa0w5.jpg


3. 本机系统信息,将单个的数字转化为仪表盘,可以表现出高中低预警和正常的多重含义。通过轻拟物的表现手法,增强驾驶舱的沉浸式体验,营造中控管理氛围的真实感。
arq3s-18p80.jpg


4. 所有的设计,都是基于对业务的理解,回到本质,思考用户是否需要多层次信息的统计分析,不同的纬度呈现结果。最终以感性、直观、优美的方式视觉表达,并考虑到数据可视化的控件类型和实现难度。


asm0e-r1gcl.jpg

       中国移动爱流量App整体的设计提案,经过用用户研究分析、同类竞争App竞品分析报告、产品定位、功能分析、交互设计、视觉设计。中国 移动只提供了运行中的上一版App,其它的调研、改版策划由蓝蓝设计进行。

这个案例比上一个案例更加整体,重大的项目应该采用这种方式来进行。

1   同类产品APP对比:

蓝蓝设计观察了20家流量类的App。通过在应用市场监测流量平台类app的下载量,我们选取以上三家为竞品。

『流量宝』中国电信出品。

『流量银行』中国联通出品。

『流量来了』,世纪龙信息网络有限责任公司出品。

分析内容:

1. 界面布局对比

2. 核心功能对比

3. 色彩对比

4. 首页印象对比

5. 界面设计优缺点

2 产品洞察 明确产品的定位和发展方向

按照用户对于流量的认识、了解、使用的程度,通常流量经营可以分为三个发展阶段。

在流量消费培育阶段(2008-2012年),随着智能手机的快速普及,客户上网频率逐渐加大,对于网络的使用逐渐从PC互联网向移动互联网转移,其标志就是智能手机用户在2013年超过了PC保有量。这个阶段主要以前向流量客户经营为主,采取流量包月甚至流量免费等方式驱动流量增长。

在流量理性消费阶段(2013-2014年),流量消费习惯逐渐养成,运营商开始改变甚至取消流量包月无限量使用策略,用户开始感受到流量的费用压力,开始对自身的消费行为和内容进行整理,逐步回落到用户能够承受的流量消费水平。而流量经营主要收入来源依然是个人客户。

在流量后向经营阶段(2014年-),随着运营商发现流量收入增速放缓的现象,运营商开始尝试定向流量、后向流量捆绑、流量800等面向后端企业的运营。至此,运营商正式迈入流量平台化经营时期。

产品不断的迭代,使我们的产品在不断的完善。 流量平台的定位也在不断的跟随行业的变化在不断的变化,才能使我们的产品得到用户的认可。

功能方向:使产品向货币化、社交化、媒介化转变。

增加用户使用率,创造可以长期登录使用的情景和功能。

基于个人:监测自己的手机流量及使用情况,提醒自己:少了可以买,也可以把多余的流量转给家人、朋友、同学、或充入手机、

基于社交:比如:发红包、赚流量、做任务、签到送流量,流量兑话费等、是可以尝试的方向,使我们的产品向货币化、社交化、媒介化转变。

aaryx-rj02r.jpg

视觉方向:使我们的产品更加的年轻化、拥抱90、00后。

交互方向:减化路径、清晰简洁

3 基于产品分析策划进行主页的交互设计

在不断的思考、对功能的深入理解后,交互设计师对首页构图了三个方案,希望能契合产品定位并在布局和表现形式上与竞品区别,展现出爱流量的。

团队讨论思考后,认为将“流量监测和流转“做为首页目前重点,赚流量做为以后发展点。确定第二种布局(中),进行视觉设计。 

aca46-05o6b.jpg

avjc5-qtihj.jpg

4 视觉设计成果

a34bi-3t998.jpg

主页设计风格确定后,就可以进行其它页面的视觉设计啦。



a1uzd-ibxp3.jpg

  1. 软件的优化设计是一个长久的的事,挑一些典型页来设计是基础的部分。

  2. 目前国内都在进行数字化升级进程,这一二十年来,从不知UI为何物,到企业纷纷重视,每个企业都有自己的设计师,重点的项目再外包给专业公司。关注整个用户体验,用体验地图触点做设计,在中型的项目上存在认识不够或目前达不到应有的预算和精度。未来发展中,相信会渐逐把重要软件的整体用户体验设计、服务设计、品牌设计的融入做为增长点。

  3. 蓝蓝设计公司有一个群,每天都在分享好的UI设计,如果你有兴趣,请报上姓名和公司职位,我们共同成长和学习。请加微信ben_lanlan, 标注“想加入设计分享群”.


如何找到一家好的高端网站设计公司?

蓝蓝

       看到知乎上的一个问题:如何找到一家好的高端网站设计公司?

       把回答的内容也转过来记录一下。


       首先回答:何为高端?



       高端与低端是对应的,目前网站设计,中低端基本是用模板改改,相对价格低,有一些小型公司或不依靠网站运营收入的公司,“有个网站就好”,所以可以用这种低投入,内容有就行的网站建设公司,特点是马上就能用,三五天把内容发布进去就可以。备案可能需要一定时间。



       高端设计公司,一般是量身定做,为企业做网站策划、分析,按照用户研究、网站建站的目的来进行网站的定制栏目页的设计。做竞品分析、研究对方的优缺点,设计的色系和企业标准色、情感表达、人物场景、用户体验思维,越深入,思考越成熟,做的网站品质越有保障。所以需要的时间、精力、投入相对多。



       因为投入相对多,所以经营业绩好的企业、集团公司、营销类大型网站来定制的比较多。



       我们公司“北京蓝蓝设计”就是为定制的高端企业用户、政府网站、软件公司来服务的。我们挺喜欢要求高的客户,这样能体现出专业设计的水平,这也是我们和其它建站公司区别开来的地方。



       我们主要是给大型软件公司平台、系统做UE、交互设计、视觉设计,用户体验优化,这个,比网站设计更难,更专业。 往往一个公司的核心产品,值得把精力金钱投入到上面,产出最大的回报。近年来,除了做软件UI,大屏大数据可视化项目外,我们也扩展了“愿意把公司网站做成核 心产品”这样的公司成为合作伙伴,更好的为客户提供全方位的服务。



       一旦成为我们的客户,设计无忧。


       我们一定会把该做的事做好,并提供超值服务和额外附加值的。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



蓝蓝设计随笔:ui用户界面中的表格设计

蓝蓝

作者:蓝蓝


表格,是一种最常见的信息组织整理手段,常用于信息收集、展示、数据分析、归纳整理。

      UI软件设计中最常用、最基本的是表格的设计,有些软件中80%都是表格类页面,可以说,设计开发的是否易用,很影响口碑和用户的使用感受。基础的东西一定要做好,就像我们吃的主食一样,虽然都是米和面,但是各地出产各种品种口味都不相同,要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。

一、基础的表格设计美化

      基础的表格可变化的地方很少,可以根据当前软件开发选择的框架控件(ext/vue/jequery不同框架会有一些不一样)做色彩和风格的变化,如:加表格不同粗细的线、斑马格,中间无竖线种种的设计,有的表格需要标题很突出,有的内文突出,这就和内容焦点相关了。

点击查看原图


为了操作直观便捷,在操作区放一些图标“删除、编辑、审核”,配合文字来使用,有的把操作类的图标放在最左边,有的放在最右侧,按行业用户习惯而定。

 点击查看原图

可以用固定表头(标题位置不变),允许用户排序,单元格内有很长的文字,设定最大字节,多内容用……替代避免转行,有小数点的数字右对齐,每列的大小可调整,这些也是设计开发中可以做好的细节部分。


二、特别宽的表格怎么设计?


有的表格的宽度,达到了屏幕的两屏和三屏,出现宽宽的横向滚动条,又有长长的竖向滚动条,但工作的人又必须看,可烦人了!很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题:

方法一

如果表格的标题是可以定制的,允许省略的,可以从业务角度取舍去掉无关紧要的,不常用的内容,把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离:挑选、丢弃、分类、收纳,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可无的?依次排序放在顺手的位置,ui设计的道理也是相通的。

方法二

如果表格里面的内容是确定的,不可省略的,比如银行的报表就是这么长,这么多,那我们就可以从设计的角度来优化,做一个加高版的表格。

点击查看原图

表格为什么一组信息只能一行呢?完全可以一组三行四行,在组中进行重点信息,非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则,让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。

方法三

大表格里面嵌套小表格,利用交互设计,巧安排空间。当用户光标移至感兴趣的那行的时候,关于它更多的内容,在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土,但也确实管用。早年在看某一招聘网站的时候,每一个人的简历只要点名字就可以看到一组关键信息,便于迅速筛选,而另外一个招聘网站,就没有这个功能,每个人都要打开之后才能看见整体信息,我后来就不怎么看那个网站了。多一步操作,对典型用户就多了许多的工作量,网站和软件的使用口碑,用户粘度就是这样在为用户考虑中一点一点积累起来的。

 屏幕快照 2020-06-08 上午11.03.47.png上图:大表格里面嵌套小表格


     方法不会只有这三种,其他的方法要根据当时的业务,用户使用的习惯、重点,因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量,如果做大的改动或许是巨大的工作量,如果要做变动,一定要在开始的时候就要让ui设计纳入开发体系,一生二,二生三,在前期第一批实施时越注重细节,后期就会越轻松,甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。

      一个系统总是需要业务担当,颜值担当的核心部分,重要的页面要额外的对待、花更多的精力和时间。如果千篇一律,也就不能显示出软件产品的独到之处了。

 

第三 与表格配合的部分设计

第一种  “搜索查询”和“过滤”部分的设计

     大多数表格的前面都有搜索过滤功能,如果搜索条件相当多,可以精选一部分主要的排成一行,其他的隐藏,点箭头再出现。整个搜索区域也可以有隐藏/显示的按钮,来给下面的表格更多的空间。

     过滤条件区域可以定义好“条件名称”一致宽度,一般在八个字左右,避免有的字节多,有的字节少,行数多了,参差不齐,区块和区块之间也要定义好统一的间距,这样整体页面就显得整齐划一、条理清晰。点击查看原图

点击查看原图

上图:搜索和卡片式信息的组合

第二种  表格操作部分的设计

       对表格的操作“导入,导出、批量导出”有的时候这类操作有1020个,有的时候才几个,多的时候很占地方,可以用隐藏的方法,over到表格上再出现,以节省空间。

       也可以分组把同类的操作聚合在一起,把常用的放在目之所及,不常用的点后下浮出现,以节省空间,

还可以光标跟随表格的某一行,点选自动浮出一群小跟班,各种操作按钮。即节省空间,操作移动路径又很短。只是不支持批量操作。

 

第三种  表格和卡片式设计、统计图的整合切换

       表格是可以转换成卡片式设计的,用一个卡片代替一行的展现信息,改变一种阅读的方式。

有的也可以转换图统计图表:曲线图,柱状图让用户直观的去解读,而不必一直看枯燥的数字。

 点击查看原图


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档