首页

干货来了!40个界面设计经典技巧!(上)

清阳

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。

image.png

 

2 放出礼品往往更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来讲,送出礼品也是之有效的获得客户忠诚度的战术,这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的,会让你在往后的活动进展(不管是推销,产品更新还是再次搞活动)中更加顺利。

image.png

 

3 合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块,版面或者元素,而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块,它无用且降低了电脑性能。此外,界面上模块越多,用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

image.png

 

4 客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时,项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

image.png

 

5 频繁展示你的主旨来加深印象

多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息,这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候,你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

image.png

 

6 将选项与按钮区分开来

诸如颜色,层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品:他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面,你就需要将可点击的元素(比如连接,按钮),可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中,我将点击操作的元素设置为蓝色,选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

image.png

 

7 给出推荐而不是让用户来选择

当展示许多项服务时,给出一个重磅的推荐项是个不错的做法,尽管推荐的设置无法满足所有用户。这么做是有理论依据的,一些研究已经揭示了这么一种现象:当面临的选择越多时,用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

image.png

 

8 给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮,撤销操作可以让操作流畅自然,这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的,其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。

image.png

 

9 指出产品适用人群而不是做成全年龄

你是想把产品做成大众化的呢还是有精确的适用人群?在产品定位上你需要更精确些。通过不断了解目标客户的需求及标准,你能把产品做得更好得到更多与客户交流的机会,并且让客户觉得你很专业,在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围,也使自身变得不那么全能。但这种做得更专业的精神却反过来会赢得信任,权威。

(贴士:喜欢下图中可爱的小人物造型么?去了解MicroPersonas吧)

image.png

 

10 试着直接果断而不要唯唯诺诺

你可以通过不确定而颤抖的声音来表达传递自己的意思,当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束,比如"也许","可能","感兴趣?" 或者"想要试试么?",那么你完全还可以把语气变得更坚定一些。不过万事无绝对,或许适当放松措词让用户有自行思考的余地也是可以的。

image.png

 

11 界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。

image.png

 

12 指明产地

指明你的地区,所提供的服务,产品来自哪里意义重大,同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里,国家,省分及城市,也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时,让人觉得非常友好。同时指明区域也会隐形提高产品的声誉,好上加好。

image.png

 

13 精简表单内容

人生性就懒惰,在填写表单时也是同样的道理,没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。不是每个人打字都很快速的,并且在移动设备上进行输入更是相当麻烦的事情。问下自己表单中是不是每个字段都必需,然后尽量减少表单中的字段。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充。过多字段很容易让整个表单显示臃肿,当然想简洁也很容易,只放少数字段。

image.png

 

14 暴露选项而不要将操作隐藏

你使用的任何一个下拉框都会对用户造成信息的隐藏而需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的,那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期,省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。

image.png

 

15 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的,单列滚动的长页面是不错的,但是我们应该适当地设置一些小节,并且环环相扣,来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

image.png

 

16 不要放太多链接分散用户注意力

为了满足各式用户的需求,在页面上放些链接链到这里链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话,就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量,最好将用于导航与用于操作的链接用样式区分开。尽量移除页面不需要的链接会让用户点击到你的功能按钮。

image.png

 

17 将操作的状态或者进度呈现出来

现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,比如邮件有已读或未读的状态,电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。

image.png

 

18 不要让用户觉得是在完成任务

试想界面上有这样两个按钮:一个是"获取折扣",另一个是"立即注册"。我敢打赌大多数人会点击第一个,因为第二个按扭让人感觉不到有利可图,并且"注册"让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边,不一定要做为按钮的标题。当然,正常的按钮还是有用处的,一般用于重复性操作频繁的地方。

image.png

 

19 让操作直观而不是让人觉得找不到上下文

不用说直接在元素身上进行操作是更直观明了的方式。比如在一个列表中,我们想让用户对每个条目进行操作那么就把按钮放到当前条目上,而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态(比如页面上的地址信息点击后可以进行编辑)。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然,对于一般性的操作本身就不需要有什么上下文的,就没必要这么做了,比如页面上的前进,后退按扭。

image.png

20 尽量显示全部内容而不要额外页面

在一个足够大的宽屏界面上最好还是直接给出表单,这比点击按钮再弹出表单要好很多。首先减少了点击操作,流程变得简洁也节省了时间。其次,直接呈现出表单可以让用户知道表单有多长,其实也是在告诉用户注册花不了多少时间。当然,这条规则适合注册表单非常简单的情况。

image.png

转载:微信公众号UI设计

小小button,大大力量!快来看看UI里的button都有哪些玩法~

清阳

在 UI 设计中,button 有多种设计形式。组合形式可以多种多样,比如纯文字button、图标+文字button、图标button、幽灵框button等等。在各种设计规范里都可以获得一个比较完整的全集。

 

image.png

作者 Lisa Cosme

image.png

作者 Pixsellz

除了组合形式,最能让button设计出彩的还是材质和风格。扁平风格简洁明了,以纯色或简洁的图标为主,适合现代简约的界面。拟物风格则模拟现实中的按钮,具有立体感和真实质感,能增加用户的熟悉感。幽灵按钮以透明或弱轮廓呈现,简洁而不突兀,与背景融合较好。还有带有动态效果的按钮,如点击时的变色、缩放等,增强交互性。此外,异形按钮可根据特定主题设计独特形状,为界面增添个性与创意。

下面来看一些好看的button设计。

image.png

作者 Aaron Iker

 

image.png

作者 Aaron Iker

image.png

作者Aaron Iker

image.png

作者Buzuk

image.png

作者 Gleb Kuznetsov

image.png

作者 Max Rudberg

你最常用和最喜欢的button,都是样的呢?

转载:UX设计便利店

B端要吃透系列:京东设计师探索高效交互模式,让我打开新思路了

清阳

我们常以“ 心有灵犀 ”来形容与合作伙伴的默契配合,若我们的产品能与用户达到同样的默契,将极大地提升用户在任务旅程中的流畅体验。

 

image.png

 

 

在B端体验设计领域,我们深知用户对我们产品的期待──快速完成任务、即用即走。

 

然而,随着业务需求和产品功能的不断扩展,流程复杂化、功能冗余、信息过载和引导不足等问题逐渐浮现,这不仅增加了新用户的学习成本,也使得老用户丧失了使用产品时的专注和效率。

 

为应对这些挑战,在早期版本升级时我们提出了“高效、亲和”的设计理念(《京东行云3.0|B端产研协作工具体验升级的思考与实践》 )。
并致力于通过设计手段减少用户在使用产品时的学习成本和操作负担,旨在打造一个流畅、愉悦的体验环境,让用户每次使用都能保持轻松愉悦的工作状态。
同时,我们也积极践行集团倡导的 “ 简单、顺滑、激发 ” 产品设计理念,通过在交互设计、业务组件等多个层面进行来深入优化和改进,以达到产品与用户之间的"心有灵犀",让用户在使用过程中更加的得心应手、更加快速高效的触达并完成任务。

 

 一  探索顺滑、高效的交互模式 
通常来说一个顺滑的交互对产品的体验提升的是非常大的,它允许用户以直观的方式理解产品的操作含义,在不依赖帮助文档的情况下,也能轻松完成各项任务。
这种设计理念不仅提升了用户体验,也确保了产品的高效率和便捷性,能够使用户迅速投入并快速完成工作,实现了真正的“即用即走”。
(1) 数字键盘,让数据录入更简单、更高效
相信很多产品设计人员都清楚选择录入的优势远大于手动录入。
在此之前,我们的工时填报页面,由于可输入信息精确到小数点后两位,所以我们常用的计步器、选择器、滑动输入等组件都无法在这里使用。对用户而言,手动逐项录入数据的操作成本非常高。

在业务改版时,我们的体验设计师了解到旧版页面信息录入成本过高的问题,于是提出了数字键盘录入数据的方案「用户在原本手动录入数据的基础上,增加选择录入数据的能力,以此降低用户录入数据的操作负担」。

 

image.png

  • 作为数据录入的组件,数字键盘适用于简短且整数的特殊场景下,如:数字录入、百分比录入。备选的数据信息以宫格布局呈现,用户可以快速点击数字键盘中需要填入的数字。相比下拉菜单和上下箭头数字输入框相比,更直观,易用性更强。
  • 对于擅长键盘盲打的研发工程师类角色来说,仍然可以通过物理键盘录入数据;而对于不太熟练操作键盘的大多数用户来说,可以通过直观的数字键盘点选录入数据。数字键盘组件甚至还能帮助用户自动计算已填数据,实现一键补全。

image.png

  • 数字键盘作为一种兼具选择录入便捷性和手动输入灵活性的数据录入组件,为不同类型的用户提供了高效、准确的数据录入体验,不仅提升了数据输入的便捷性和准确性,而且通过适应不同用户的操作习惯,增强了产品的普适性和用户满意度。
    继而我们也将数字键盘组件在其他使用场景进行了拓展,比如,其他场景下数字键盘上集成了手动录入的输入框,备选数据可以根据用户设置的起止日期进行自动计算,不仅帮助用户减轻了操作难度也极大节省了用户的时间成本。
数字键盘经过不断的拓展与优化,已经成为用户在多种场景下进行数据录入的利器。
在未来,我们将持续关注并探索数据录入交互方式的优化与改进,致力于进一步优化信息录入的体验,如当下火爆的AI,来实现更加智能和自动化的输入解决方案,从而最大程度上让用户与产品交互默契、事半功倍。
(2) 在关键节点设置任务提示卡,给予用户即时指引
很多大型B端产品的详情页在成熟期后都会面临信息内容多、分类复杂的问题,这导致用户需要滚动多屏或者切换tab页签去查找信息,即便产品设计团队已经花了不少心血将信息布局做了优化和重组,但也难以避免有些用户查找关键信息费时费力,不清楚应该在页面哪一块进行哪些操作。
虽然IM、邮件等工具可以一定程度上解决信息的触达,但用户从其他平台点击网址链接跳转到产品详情页后依然会面临缺少明确的指引问题。

image.png

  • 针对以上用户使用中的痛点,我们在页面中关键区域设置了一系列操作指引性的任务提示卡片,并在卡片上设置明确的引导文案及操作按钮,以减少用户因不熟悉产品功能或者页面信息过多而找不到操作入口的问题;
    引导用户点击“去完成”、“去操作”等操作按钮直接跳转至应该操作内容模块或相应页面去完成应该完成的操作,这样就使得不同用户在不同环节完成相应的任务,保证流程顺畅的走下去。

image.png

  • 任务提示卡作为一类高效的即时指引工具,已在多个用户使用场景下发挥了关键作用,不仅帮助用户提升了完成任务的效率,也在一定程度上缓解了用户的焦虑。该组件的设计初衷是为了解决当用户面对复杂或不熟悉的操作时,为了用户提供即时的指引。
    在不同系统平台的适配过程中,我们特别注重交互模式的灵活性和适应性,以适应不同的适用场景。例如,我们将传统的卡片视图优化为列表视图,并支持多个操作项,实现了用户所见即所得的直观体验。
经过在多种场景下的实践验证,任务提示卡已成为缓解用户焦虑的一种手段。我们也认识到,用户焦虑直接影响到产品的可用性和用户满意度。
因此,我们会持续关注用户焦虑产生的根源,不断调整和优化我们的设计策略,有目的有效率的降低用户焦虑水平。
(3) 巧用浮层卡片,减少非必要的页面跳转
提到「链路」,相信很设计师都能想到缩短流程、简化操作步骤等手段。然而,随着业务的复杂度提升,我们的很多使用流程变得越来越长,用户仅仅查看或者编辑一个简单的信息也需要打开新页面,这无疑增加了用户的操作成本。
在诸多项目实践中,我们发现浮层卡片是一个非常灵活的组件,它可以在用户需要时通过鼠标悬停即可展开,用户可以不用跳转或打开新页面就可以在浮层卡片中完成一些关键信息的查看或者编辑。
这种交互模式不仅可以减少用户的操作步骤,还减少了产品链路和开发成本,在提升体验的同时也更好的效能业务。

image.png

在我们的平台上,一些用户虽然可以将自己经常使用的应用常驻到菜单栏上,但是受限于屏幕尺寸左侧的菜单栏不能显示太多常驻应用。
  • 当用户在切换一个常驻但因为屏幕尺寸而没有展示在菜单栏上的应用时,需要先点击更多【应用图标】进入更多页面。
  • 再定位到需要切换的应用图标上进行点击才能完成整个【切换】的流程。
  • 当我们洞察到用户使用菜单栏的痛点后,在后续的迭代优化时。在更多应用的图标上增加一个悬浮事件。
  • 鼠标悬浮时,它就像一个传送门一样将用户需要切换的应用呈现在浮层卡片上,用户点击所需的应用即可完成应用的切换。

 

image.png

 

【浮层卡片】作为一种灵活、高效的交互模式,在业务侧得到能够有效降低用户重复操作的验证后,我们把它拓展到了很多的相似场景里。
  • 比如,在消息通知面板交互上我们也采用了【浮层卡片】的交互模式,用户既可以点击去查看全部消息也可通过鼠标悬浮快捷唤出【浮层卡片】查看最新消息。

  • 在表格页面通过使用【浮层卡片】查看状态、附件等信息,用户可以不用进入详情页快速获取信息,用户掌握好这些小贴士可以有效提高工作效率。

 

经过多场景的实践,我们团队已将浮层卡片精炼为一种有效缩短用户使用流程的交互模式,显著提升了用户操作效率。也被我们拓展到更多场景,以实现在更广泛的应用维度上为用户提效。

 

 二  创新业务组件设计,提升复杂场景下的数据可视化体验 
随着业务的不断下钻,不免会遇到一些复杂的使用场景,基础的交互和组件已不能有效的解决用户在使用中的问题。
在一些既需要关注结构化的概览数据又要方便查看详细数据的场景中,以及在一些数据关联、任务串联等场景中,设计侧通过可视化、结构化等设计手段探索出了一些新的业务组件,解决了数据概览、数据关联不清晰等问题,为用户构建了直观、易懂的使用体验。
(1) 信息概览与Tab标签页相遇,概览&详情均可兼得
在一些管理场景下会涉及到既需要查看各阶段下不同状态的概览数据,又需要查看详细数据的场景。
按照以往的交互,用户可以用筛选器筛选出各阶段下不同状态数据再进行查看对比,虽然筛选器可以筛选出这些多阶段、多状态的数据,但存在着筛选步骤繁琐、多阶段&多状态的数据呈现都是棘手问题。

我们最初使用了数据可视化的看板来呈现各阶段下不同状态的概览信息,但这只解决了数据概览的问题,用户还是需要点击“详情”才能跳转至相应的页面。

 

image.png

 

  • 体验设计师在一些项目中尝试了将数据可视化看板与Tab标签页的融合,这就形成了具有Tab切换功能的数据看板,用户在查看概览数据的同时也可以通过点击切换查看各阶段/状态下的详细数据。

image.png

 

  • 在经过用户反馈和不同业务场景下的适配后,我们又针对小屏增加了折叠功能、折叠后状态数据隐藏、宽度不够时状态数据隐藏等优化。

 

image.png

 

  • 以上数据看板与tab页签融合的方案,一方面解决了数据可视化的问题,另一方面也解决了切换查看详情数据的繁琐操作。在明确了以上组件的价值点后,将其进行延展并应用到了一些具有共性的使用场景中。

通过将数据结构化和tab标签页的结合的方式,巧妙的解决了用户在进行数据概览和查看详细信息时可能遇到的繁琐操作问题。
这种模式不仅让页面信息结构更加清晰,用户无需跳转,即可在当前页面内,快速的查看概览及详情页信息。

(2) 树形连接线新范式,数据关系呈现简单明了

针对CICD等技术类产品中的存在的诸多数据关联、任务串联等复杂数据关系的难点,设计侧巧妙的使用树形连接线的可视化手段解决数据关联不清晰的问题,让信息结构更易懂,方便用户理解和操作。
在我们的版本管理模块中,用户在需求规划阶段需要将交付的需求和开发分支进行关联,一个需求不仅可以与多个开发分支进行关联、多个需求也可以与多个应用进行关联。这里的不仅要解决复杂的关联关系,还要解决需求与开发分支可增删的操作难点。

image.png

 

  • 针对这样的复杂多维使用场景,我们在设计时借鉴了树形连接线来解决需求与开发分支的复杂关联关系,通过树形连接线将需求与开发分支进行串联,让复杂的关联关系一目了然。

    在解决了复杂的关联的同时,在连接线上增加了「新增」及在表格操作列增加了「操作列」的操作来解决编辑等扩展问题。

 

树形连接线作为一种解决数据可视化的手段有效解决了业务中的难点,同样设计团队也将其拓展到了更多适用场景,帮助用户提升信息查看和操作效率。

 

image.png

 

  • 在处理嵌套表格时,树形连接线的使用极大增强了单元格与嵌套层之间的视觉关联。

  • 在OKR系统中,树形连接线的应用使目标和任务之间的从属关系更加明晰。此外,还为卡片在折叠状态下提供了展开后可查看更多信息的视觉引导。

通过以上创新应用,树形连接线已成为提升数据可视化和用户交互效率的重要设计元素。设计团队将继续探索其在不同业务场景下的应用潜力,以进一步优化用户的信息读取和决策过程。
以上两组业务组件的设计思路充分体现了设计师对用户诉求的深入洞察,并在设计上做出了突破。
设计师在对用户场景深入分析后,巧妙地将现有组件的优势与用户场景相结合,创造出了一系列新的业务组件,这些业务组件不仅解决了一系列共性问题,也为未来的业务组件设计提供了新的可能性。
 三  制定可持续的体验改进策略 

 

以上几个是我们通过洞察用户诉求,依靠设计手段改善用户体验的典型案例。

 

想要持续而又高效的提升产品的用户体验,仅凭零星的创意是不够的,还需制定一套有效的设计策略,这套策略旨在培养设计团队成员的创新意识和体验思维能力,使设计团队能够持续产出高质量的用户体验解决方案。

 

(1) 培养宏观视角
设计师理解需求时需从全局视角审视业务需求、产品目标和用户诉求,深入洞察产品体验旅程中的所有关键触点,避免陷入只见树木不见森林的误区。通过多元的视角辅助我们了解用户行为背后的真实动机,从而提出更有效的解决方案。

(2) 鼓励尝试更多可能

在项目中,我们鼓励设计师在满足产品和业务需求的基础上,打开思维的边界去探索更多可能性。无论是对用户的理解还是设计方向的探索,我们支持设计师不断自问,给予他们尝试更多可能性的资源支持,以促使设计师们产出无懈可击的解决方案。
(3) 理解用户对变化的抗拒心理
在B端产品中,用户对比较大的变化会产生抵触心理,从心理学上来讲:大家更喜欢保持现有的、已熟悉的行为模式和习惯。如果出现一些改进比较大的优化方案上线后,用户并不一定都是照单全收,极端情形下还会出现用户要求代码回滚的情况。
因此,我们在设计时不仅要解决业务需求,还要考虑用户的学习成本和对变化的接受程度。必要时,需通过强化运营和落地最佳实践,让用户意识到改变后的优势和收益来提升心理上的接受度。
(4) 沉淀与复用优秀设计方案
我们会定期复盘并将在项目实践中已经被验证的优秀、通用性高的方案(包括但不限于交互、视觉、业务组件等)定期汇总到设计组件库以及模板库中。通过评估这些方案的价值点和适用场景,设计师可以将这些经过验证的方案作为备选,复用和延展到未来的项目中,为更多业务、更多产品赋能。
转载:UXD笔记
 四  写在最后 
落地简单、顺滑、激发的产品设计理念,我们不求一蹴而就,而是有意识的去关注用户的问题,持续不断的优化和改进,用心对待每次微小的改进,积少成多,最终会实现产品与用户之间的“心有灵犀”。
希望以上分享能给从事在B端体验设计伙伴们带来一些新思路、新思考。优化、改进的途径有很多种,我们愿意将此次分享称为抛砖引玉,更多还是需要我们深入到业务中,与产研同学协作一起产出更优秀的解决方案。

什么才是好设计?14个维度分析给你听!

清阳

什么是好设计?这个问题大概是一千个人有一千个哈姆雷特了,不过作为一门学问,有心人会将它归纳起来,今天分享的这篇文章,是由一位有心的设计师总结而成的,聊聊他对好设计的14个维度分析,童鞋们可以学习一下呦。

1. 品味和能力

一个设计者最需要的就是好的品味(Taste)。当我们说一个人品味好的时候,常是指这个人的”审美”好,或者这个人善于发现”美”。但是一个人有好的品味,往往不是因为他善于发现“美”,而是因为他善于识别“丑”。当一个人识别出丑陋的事物,并且对这种丑无法忍受的时候,他自然就会选择那些美的东西。因此,好的品味不仅和”美”有关,更和”丑”有关。这里说的”美”和”丑”,不只是表面上的好看或者不好看,它包括产品的美丑,技术的美丑,制度的美丑,和人性的美丑。对于刚开始从事创作职业的人,尤其是做设计的,品味和能力可能会有一定的距离。在你在职业生涯刚开始的几年里,你的品味会比你的才能超前几步。你的作品可能暂时没有满足你的品味,不要因此放弃,因为能力会慢慢的赶上。而且最终,你的品味会决定你的风格(Style)。

美国最火的广播节目”This American Life”的Ira Glass通过一个视频告诉我们他的经验,他说,在刚开始几年里,你的作品可能并不如你希望的那么好,你试图做好,但是能力并没有达到。但是记住品味是你的一切,如果你的品味足够好,那你就能意识到你做的东西是很蹩脚的,是不够满意的。很多人没有度过那个阶段就中途退出了,但是我见过的所有优秀的创作者,都曾有过这样的阶段,在这个阶段中,他们有很好的品味,他们知道他们所做的并不让自己满意,但最终都度过了这个阶段。因此每个人都有过这样的阶段,如果你正处在这样的阶段,你需要知道这是正常的。你所唯一能做的而且最重要的就是,做很多很多的事,每个月每周都做出新的东西,只有通过大量的实际操作,你才能跟上你的品味,才能够弥补品味和能力之间的间隙。你的品味帮你辨别出你想做的和你会做的之间的距离。

2. 什么决定你的品味?

一个人的品味由多个因素共同塑造,最直接的是一个人成长环境的文化,中国的文化是什么也许透过frog Design的创意总监Jan Chipchase的这几张图你就能看出一些,财富和贫困的差异,西方文化和传统文化的差异,梦想与现实的差异

image.png

image.png

image.png

image.png

 

在这样差异巨大的多元文化下成长起来的人,对差异化会比较包容,品味自然也就比较宽松,可以说中国人适应能力强,好的坏的都能将就,喝的了毒牛奶,吃的了地沟油。也可以说中国人有中庸的思想,做事情一定跟大部分人一样,不愿意与众不同,抢打出头鸟。还可以说中国人喜欢辩证的看问题,任意拿两样东西去让他做个比较,答案常常是”这个也可以,那个也不错,各有各的好”。中国人差异化的成长环境,决定了中国人必须对丑的事物拥有极大的容忍度,否则就混不下去。在中国表达对丑不满的人常常会被排挤,被攻击,甚至遭受生命危险,因此大部分人都不由自主的接受我们周围的世界,而能够发出批判声音的人为数不多。有意思的是,公众本身不觉得那么有些东西很丑陋,被有的人一提醒,才意识到原来那的确是丑的。从毒牛奶地沟油到现在的毒胶囊,本质上说都是有人对一些丑恶的做法视而不见的结果。中国需要更多这样”对丑无法容忍”的人,需要一个对”丑”重新认识的启蒙,通过揭露丑而发现美。

3. 对丑的容忍度

Hi-iD 曾有一片文章讲“美的感知力”,很赞同其中关于Taste的看法。Taste翻译过来是”品味”,可品味通常是围绕着格调上的词语,比如我们会说某某人着装很有品味,某某人对美食很有品位,如果我们只是把品味当做类似着装或美食概念上的品味的话,未免有点将其概念狭隘化了。Steve Jobs的衣服千古不变,如果按照大众对品位的理解,Steve Jobs的品味就差到了极点。因此Taste是一种能力,而不是格调。我们不去纠结于词语上的不同,就其概念来说,绝对不仅仅是穿着时尚,或者紧跟潮流那么简单。Taste是一种”美的感知力”,是一种力量,这种力量一定是每个人都有,否则就不会有大众都欣赏的美。既然每个人都有这种美的感知力,那么是什么让Steve Jobs的Taste与公众的Taste不同呢?仅仅是因为每个人的对美的感知力大小不同决定的吗?个人认为正好相反,Steve Jobs的品味于众人不同的原因在于他对丑的容忍度极底。几乎是“对丑陋的零容忍”。这种近乎严苛的要求一直影响着他的一生

Steve Jobs刚刚搬新家的时候,家里没有家具,因为他始终找不到自己满意的家具。他就是这种宁缺毋滥的人。有一张照片,他在家里盘腿坐在地板上,家里只有一盏Tiffany的大落地灯。这张照片后来成为了经典。

因此”对丑的不容忍”是解释一些人Taste的不同于其他人的最好的方法,也是解释了中国为什么一直出不了像Steve Jobs这样的人,因为中国每个人从小到大见过太多丑的东西,对丑的容忍度很高。不信?欣赏一下这些优秀建筑吧。

image.png

4.”美”是主观感受吗?

我们从小到达都会认为,”美”的概念是主观的,一个东西美不美,常常由个人喜好决定。某个人喜欢一件东西,会有很多原因,有可能是他的母亲也拥有同样的东西,或者某个明星也在用它,或者是有一些特殊的记忆在里面。

人的思想就是没有经过整理的碎片的混合物,所有小孩子从被无数遍的教导,”美”是一种偏好,是每个人自己的事。这样的说法可以有效的解释不同人有不同的观点并且杜绝无谓的争辩。但这种说法是错误的。只要你设计过东西,你就会明白。

如果你是一个设计者,如果你承认美是主观的,那你没法做设计了,如果美只是个人偏好,那为什么还有设计呢,每个人喜欢自己偏好的东西就好了。

image.png

有经验的设计者会发现随着经验的积累自己对”美”的认知是在变化的,他会发现有些美是被人们共同认可的美,找出这些被公认的美之间的共性,就成为他的主要工作方法。中学的课堂里马克思教我们辩证的看问题,任何事情都是相对的,包括真理。即使我们已经长大了,这种观念仍然会留在我们的潜意识里。但是只要你开始思考,你就会发现,众多领域对”美”的认识有惊人的相似之处。

Dieter Rams设计原则

既然有公认的”美”,那么自然会有一些创造这些美的通用方法。德国工业设计师Dieter Rams总结过如下”好设计”的十大原则

image.png

好设计是有创意的(innovative)

image.png

好设计让产品可用(makes product useful)

image.png

好设计是美的(aesthetic)

image.png

好设计让产品易被理解(be understood)

image.png

好设计是不唐突的(unobtrusive)

image.png

好设计是诚实的(honest)

image.png

好设计是不过时的(durable,timeless)

image.png

好设计贯穿到每一个细节(thorough to the last detail)

image.png

好设计关心环境因素(concerned with environment)

image.png

好设计是尽可能的无设计(as little design as possible)

Dieter Rams所说的设计是工业设计的范畴,工业设计是塑造可操控产品的艺术。设计对象包括人们要的用各种实体,从餐具到椅子,从电话到汽车。在这里不讨论工业设计和其他领域的区别,也不去逐一探讨Dieter Rams设计原则,仅仅挑出几个有意思的分享。

5. 好设计是尽可能的无设计 As Little Design As Possible

这句话换个说法就是”好的设计是简洁的”,这个观点听过无数遍,不论从数学领域,建筑领域,绘画领域,你都会听到这种说法。在数学里,越简短的证明公式就越好。对于建筑师来说它意味着精心打造的结构,而不是表面的装饰。同样,在写作中,这种观点意味着只说必要的话,并且尽量简短。

建筑领域中 密斯•凡德罗 采纳了包豪斯建筑学派的风格,继承了包豪斯的创始人 格罗皮乌斯 的现代主义建筑的观念,并且将种观念带入美国,提出”少即是多(Less is more)”的建筑哲学,开创了现代主义建筑的时代。当现代建筑想要抛弃建筑中的装饰的时,他们不自觉的的还是会设计带有装饰性的建筑,只有”空间(space)”和”关连(Ariticulation)”的概念代替了”象征主义(symbolism)”和”修饰(ornament)”成为建筑的关键词时,好的建筑才出现,John Ruskin曾说过”建筑是结构的装饰”,但现在可以说,装饰建造可以,但是不要建造装饰

image.png

The Farnsworth House by Mies Van der Rohe

其实简单就是事物本来的样子。不断强调简单,是因为当人从事设计工作的时候,常会忘掉这个原则。比如网页设计里,一些人总是想要把空白的地方填满,生怕页面空空淡淡,那样是极傻的。设计中的装饰只是一些花样而已,只是些小把戏(Trick),表面的装饰背后隐含着的其实是内容的空虚。当你强迫自己把东西做的很简单的时候,你就被迫直面真正的问题。当你不能用一些花样和装饰掩盖的时候,你就不得不做好那些真正本质部分

6. 好的设计是不过时的 TimeLess

从数学角度思考,只要没有错误,每一个数学证明都是永恒的。所以数学家哈代会说:”丑陋的数学是在这个世界上是无法存在的”。以永不过时作为目标是帮助自己找到最佳答案的最好方法,如果你不想让你的产品被别人所取代,那你就只好做出那个最佳的产品。这也是为什么一些大师的作品在任何时代都很有吸引力的原因了。

同样,把永恒作为目标也是一个避开流行趋势影响的方法。”流行(Trend)”会随着时间改变,它和”潮流”,”时尚”一样,每年,每个季度,甚至每天都不一样。但是如果你要设计出杰出的产品,你应该避开流行的掌控。拿三星和苹果做比较,三星的是典型的追求流行的公司,它的文化是紧跟用户的需求,用户要什么他们就做什么。而苹果的文化是要做出杰出产品,他们不是那种对用户言听计从的人,他们不关心当下流行什么,只关心如何找到那正确的答案。同样,如果看国内的创业热潮,很多idea是追求当下流行,常常照搬美国的最流行的东西或者概念,互联网概念一出一大堆,一会儿LBS,一会儿SOLOMO,一会儿Cloud Computing,一会儿Pinterest等等,媒体把概念炒的风风火火,不但没有帮到创业者什么忙,反而误导了很多人,以为找一个很火的概念就一定能做好,就一定能有人用。结果并不是这样,不论之前团购的火热,或者社交游戏”Draw Something”的火热,它们都是一个流行的产物,随着时间的推移,它们会慢慢淡入我们的视线。反之如果一个东西能够长盛不衰,那说明它的吸引力一定来自于本身的魅力,而不是流行因素的影响

既然好的设计是不受时间影响的,那么如何判断你的做的东西是否受时间影响呢?方法之一就是让你的作品对上几代人有吸引力。因为我们很难猜测未来是什么样子,但是可以肯定的是,未来的人不会关心当今的流行趋势,这一点和上几代人相同,上几代人也不会关心当下的流行趋势。所以,如果你的作品对今天的人们以及200年前的人都有吸引力的话,那么它很有可能对未来200年后的人还有吸引力。

7. 好的设计让产品被理解

好的设计可以让产品更容易被理解,许多设计者设计了半天,做的很辛苦,但是如果他解决的是错的问题,一切都白费。举个例子,20世纪中期伴随着包豪斯的影响,现代主义诞生后,出现了一股无衬线(San-Serif)字体的热潮,浪潮发展到最后,甚至现在所有的设计师在任何地方都在用Helvatica了,因为都知道这个字体是简洁的。的确这类字体是更加的纯粹化的字体,看起来的确很简洁,但是在字体中它并不是是你要解决主要问题,字体设计最为重要的目的是易于辨认,也就是让内容变的易读(readable)。传统的Times New Roman 字体是一种有衬线(serif)字体,他很容易分辨。还有很多很好的serif字体,例如Garamond,Baskerville,Carlson,Egyptienne等等。优秀的产品需要贯穿到每一个细节,就连小小的字体的选择都要做大量的研究和对比。阅读工具prismatic的设计者为了选择一款合适的字体,对其各个字体的历史,发展和优缺点做了极其精致的分析:

Garamond是法国传统风格,始于1530年,它对比划的几何比例和平衡有着超前思考,其中的字体粗细交错带来了动态的平衡和易辩性。

image.png

image.png

Egyptienne 是基于Carendon模式的一种变形,它和现代的sans-serifs字体搭配起来非常合适。

serif字体本身的线条的粗细变化和平衡就跟中国书法一样,好的书法作品是不可能每条线都一样粗细,一定是交织的平衡。人类的视觉本身对不同线宽的交错就有着美的感觉。比如下图最左边是蒙德里安在”新造形主义”﹝Neo-Plasticism﹞里的作品,其中每个交叉的线条都有着不同的粗细。如果将同样这幅画的线条变成同等粗细,那这件作品的性格就淡了。同样根据人自然的审美观,细线条比粗线条要美,比较第二和第三张就能看出来

image.png

image.png

image.png

San-Serif字体并不是完全坏的,它可以作为很好的文章标题,但是让人伤心的是大多数设计师也许只知道Helvatica,好的san-serif字体有很多,比如Akzidenz-Grotesk,Univers

Akzidenz-Grotesk 起于1896年,受到很多字体的影响,从Baskerville, Garamond和Carlson中继承了几何比例的影响,将其发展到了新的一级。当代的Akzidenz-Grotesk字体遗传于20世纪50年代后期,它已经是被扩大后的字体族,这些风格到后来启发了更加现代的Helvetica,和Univers。

image.png

字体的设计最初是由印刷术带动的,欧洲人当时声称印刷术是德国人在1450年首次发明的,但是他们当时不知道,中国早在1040年就发明了活字印刷术,虽然现在中国先进存留的印刷物最早的已经是13世纪的,但是关于毕升的发明活字印刷的事迹是早已记载在11世纪北宋时期沈括的”梦溪笔谈”中了。中国的字体一直是一门书法艺术了,其影响扩展到整个东亚,但是如今写的简体字的我们,几乎连欣赏书法的能力都快没有了,前人在字体发展上的积累并没有很好继承下去,直到现在,中文在电脑上的字体只有那么几个,相对其他语言,差的太多。这样宝贵的传统文化的丢失,让人十分感叹。

image.png

8. 好的设计是诚实的,正直的(Honest,Integrity)

一个诚实的设计产品绝不能声称它并没有的功能,绝不能吹嘘。对于很多人来说,”设计”和”诚实”是两个很难放在一起的词,但是诚实对于设计来说太重要了,拿我们都相信的数据图表来说,如果你觉得,一个数据或者一个图表是最力的证据,是无可争辩的,那你就错了,图表也可以撒谎。信息设计和数据可视化之父 Edward Tufte 在他的书“The Visual Display of Quantitative Information” 中说,当电视里的产品或者图表说谎的时候,这个谎言就会被扩大千万倍。如果纽约时报的报道插入了说谎的图表,那么这个谎言就被扩大了几百万倍。书中有这么一个图,图中表示施行限速前后交通死亡数量的变化。

下面这个图几乎不能说明任何问题

image.png

加上几个数据点,这个图表达的就有了不同的解释

image.png

我们可以试想第一幅图的其他可能解释。

image.png

如果再加上其他地区的数据,那表现的又多了一层意义。

image.png

因此,同样的图表,可以表达很多意思,如何找到最好的表达方式是设计者需要认真思考的。

Paul Graham的设计原则

image.png

Y Combinator的创始人Paul Graham在他的文章”Taste of Maker”里讲了他的设计原则

image.png

好设计是有启发性的

image.png

好设计是困难的

image.png

好设计是看似容易的

image.png

好设计是有些奇特的

image.png

好设计是成批出现的

image.png

好设计是大胆的

9. 好设计是有启发性的

文学作品可以被分为描述性和启发性,绘画作品也是,启发性的作品往往比描述性的更打动人心,正如每个人看到《蒙娜丽莎》都会有自己的理解一样。在建筑和设计领域,这个原则意味着一个建筑或者产品,应该允许你按照自己的意愿使用。比如一幢好的建筑物应该充当一个平台,人们在这个平台上可以过自己想过的生活,而不是让人按照建筑师的意思去安排你的生活

对软件行业来说,这条原则意味着应该为用户提供基础的元素,并且使得他们能够随心所欲的组合,就像乐高玩具。在数学领域,有启发性意味着一个好的研究应该可以为许多新工作提供基础。在学术界里,大体上可以把被引用的次数当做启发性的衡量标准。

10.好设计是困难的

做出伟大作品的人,我们会发现他们的共同点都一样,他们工作的非常辛苦。解决越困难的问题越需要努力付出,登山的时候,必须扔掉一切不必要的装备。有一个关于王石的故事印象很深刻,冯仑在谈王石时说:”王石登珠峰的时候,每登到一个阶段, 回到大本营时,就一头扑进帐篷,躺下,一动不动,一句话也不多说,队友以为没气了,但王石说,到那个时候自己只想多蓄积精神,以便能登上珠峰,其他什么都不想。”

然后冯仑又说另外一个登山者,每到一个阶段就跟媒体通气儿,很兴奋地谈自己看到的感受,结果到8000米的时候再没有力气登上去了,只好遗憾地下山。所以,当人有了一个目标的时候,就应该不遗余力,耐得住寂寞,才能登到高处。

在设计中,当困难太大的时候,就逼得设计师不得不选择最简单的设计,当解决难题成为设计师的主要任务时,那些花样,流行,装饰全都不存在了。

并非所有的痛苦是有益的,有好的痛苦,也有坏的痛苦,你需要的痛苦是让你向前冲的痛苦,而不是无作为的痛苦。设计工作中,解决问题的痛苦是好的,但是挑剔的客户和低劣的材料带来的痛苦是坏的痛苦

德国包豪斯(Bauhaus)学派的设计师采取美国建筑师路易斯 沙利文(Louis Sullivan)的”形式追随功能(form follows functions”的观点。因为当功能本身就很困难的时候,形式必须追随功能,因为没有别的精力再开发多余的”形式”了。同样,人们觉得自然界里野生动物是很美也是因为他们富有挑战的生活让他们的每一个特征都有其作用。没有丝毫装饰和浪费。

“Time always softens the pain and makes things look like more fun than they really were.
But who said everything has to be fun?
Pain builds character.
(Sometimes it builds products, too.)

时间总是淡化痛苦,让一切变得比实际情况更轻松。
但是谁说生活一定是轻松的?
痛苦造就性格。
(也许还造就产品。)”

Jamie Zawinski,”the netscape dorm”

11. 好设计是看似容易的

当我们看到优秀的设计师做出的作品时,常常会想他们这不就是个这嘛,这也太容易了吧。但是这其实是一种错觉,一个好的产品很好用的很简单,可能是经过了不断的改善。比如好的文章读起来很轻松,但是背后可能经过反复修改。科学和技术上的重大发现,在形式上往往很简单,看过之后你会觉得这办法我也可以想出来。Adam Savage在TED上做了一个演讲,“简单的想法是如何引导科学发现(How simple ideas lead to scientific discoveries)”他通过两个生动的故事告诉我们重大的科学发现是来自于简单的,有创意的方法的,这个方法任何人都可以使用。但是实际上却并不是任何人都能做出伟大科学发现的。达芬奇的绘画有些只有寥寥几笔,但他却画出了最重要的东西,单独看这些线,你会觉得没什么困难,但是你开始画的时候就会发现那是很困难的。

用线作画实际上是最难的,因为他要求对对象的准确把握和高度的概括。许多小孩子放弃画画的原因之一就是他们开始学习成年人的绘画技法,用线条勾勒。因为用线条作画是最为困难的,而中国的传统水墨画都是用深浅的线条画出来的,所以,可以说中国传统画家对事物的概括能力是世界上最好的。而我们在新的时代却把这些能力忘记了,或者不再谈论了。

image.png

12. 好设计是奇特的

某些最杰出的设计常被认为是不可思议的,因为他超出了人们的想象。这里说的奇特也就是我们通常所说的风格。每个设计师都想有发展出自己的风格。但是如果你为了开发风格而做的产品,往往不是最好的,相反如果你只想着做出最好的作品,你就不可避免的采用一些特殊的方法。密斯凡德罗并没有想过要树立现代极简主义风格,蒙德里安也无意构造新造型主义,他们只是想做出好的作品

每个人的风格都是自然形成的,在通向正确的道路上必然会产生风格。16世纪的风格主义,19世界的浪漫主义都是追求做出完美作品的结果。

13. 好设计是成批出现的

这是一个很奇特的规律,接触的设计作品永远都是成批出现的,比如15世纪的佛罗伦萨有伟大的建筑师布鲁内莱斯基,画家马萨乔,飞利浦里皮,达芬奇和米开朗基罗。当时在意大利的米兰也是同大的城市,可是15世纪的米兰却没有什么伟大的艺术家。15世纪弗洛伦萨有一些特殊的条件,这些条件早就了这些伟大的艺术家。它们是不可延续的,因为今天的佛罗伦萨已经不是这样了。今天中国的人口那么多,按比例推算,拥有达芬奇天赋的人有很多,为什么没有出一个达芬奇。原因是达芬奇和任何伟大艺术家的出现除了他本身的天赋以外,还依赖于当时的地理位置和环境。今天的人流动性很高,但是伟大的项目依然集中在少数几个热点上:比如德国的包豪斯学校,曼哈顿计划,洛克希德公司,以及硅谷产生的创业传奇。历史上任何时刻都有一些热点领域,而且也有一团体在这些领域里做出伟大的成绩。如果你远离这些中心,那几乎不可能靠自己就取得伟大的成果。你可以拉动这个浪潮,但是不可能跳出这个浪潮。

14. 好设计是大胆的

在历史的任何一段中,人们都会相信一些很荒谬的东西,并且那么的深信以至于你出言质疑就会被恶意伤害。许多文艺复兴时期的作品在当时都被认为是极其大逆不道。哥白尼对地心说感到无法解释,而他的同代人都可以忍受。爱因斯坦的相对论触犯了经典物理学家,许多年一直不被接受。奥威尔在他的著作《一九八四》中按时政府会通过赤裸的压制来控制信息的流动,特别是通过禁书的方式。听起来很熟悉吧,中国早在秦始皇时期就已经下令过销毁孔子的《论语》,以及后来的焚书坑儒。奥维德被奥古斯都驱逐出罗马,其中第一个原因就是因为他写了《爱的艺术》,即使在崇尚优秀的文化的雅典,人们在阅读某些书籍的时候也难免胆战心惊。大卫里斯曼说过,在印刷术的世界里,信息是思想的火药,所以审查者们才需要穿着肃穆的长袍来熄灭点燃的火药。因此伟大的思想往往是大胆的跟统治者对立的。这也就是解释了,为什么中国的诺贝尔奖得住们,要么是在国外得到的,要么就是在监狱得到的。

上面一部分说的事件的错误现在看来都是显而易见的,然而在当时的人们并不觉得有那么的糟糕。上海美国学校的师生看了电影《阳光灿烂的日子》,姜文跟这帮洋师生做了映后交流。临走前一穿着校服的女生问姜文”为什么电影里那些孩子都经历了文革,却感觉那么快乐呢?”。 姜文愣了一下,但反应够快,说:”我看你现在也很快乐, 等你长大了, 你才知道自己处在一个多么糟糕的年代。”同理,生活在现在的我们似乎觉得周围的一切是可以接受的,但是当过了几十年之后,就会发现原来之前的时代是那么的糟。

我们当下需要警惕的不是奥威尔笔中的”老大哥”,而是我们自己心中的对丑陋的无视。如果你想要做出伟大的成果,就不能对现实和丑陋视而不见,反而应该特别主义。

发现丑的东西比想象美的东西要容易。大多做出杰出成绩的人似乎都是为了修正他们眼中的丑陋的东西。意大利画家乔托看到拜占庭帝国的《圣母像》,深感不满,于是动手改进,他因此成了文艺复兴的先行者。哥白尼对地心说的解释感到困惑,所以去找到真正的答案。乔布斯觉得所有的智能手机都很丑陋,因此决定去设计他想要的手机。中国诺贝尔奖得主看到中国的丑陋,于是去为之斗争。所有优秀作品的秘诀就是:非常苛刻的品味,加上实现这种品味的能力。

经验教训

  • 做设计不是发现美,而是感知丑

  • 设计与流行无关,与做出最好的产品有关

  • 装饰是掩盖空虚内容的多余物,设计要直面本质部分

  • 做设计的过程很难,但结果看似简单

  • 设计需要大胆,敢于判断

转载:UI设计

10张图让您读懂什么是UI、 UX?

清阳

什么是UI、 UX?或者说它们之间有什么不同?说句实话早几年我连UI都不是很明白,说出来都有一点不好意思了……

Ok…让我们用图片的形式来看一下UI与UX的不同之处吧。

图一:倒过来的蕃茄酱瓶设计,考虑到番茄酱快用完时很难倒出来的使用情境

 

image.png

图二:从定义来解释UI与 UX之间的差异,两者定义有很大的不同。

  • UI定义:UI是网站页面是如何物理布局。一个UI设计师会和你谈东西应该放哪里,用什么颜色。UI是负责网站的创意和视觉作品。

  • UX定义:UX专注于网站,它的行为与互动,比如一个盒子滑出,以及人们如何与它进行交互,比如他们会点击或输入进行交互。UX处理的内容和网站地图的结构。

image.png

图三:从专业分工的角度来说明差别,可以看出负责的部份有哪些相同,哪些不同。

image.png

图四:这张图比较复杂,但是基本上还是看得出差异。相同之处很明显,都有大胡子,但是装扮上就有很大的区别。为什么?你们可以根据定义思考一下……

image.png

下面的这张图跟上面的那张是同一张,只是风格不一样,从设计师的角色转变成很酷的时尚年轻人。

 

图五:从工作职责来解释差异, UX的范围很广,很少人可以精通全部,可以说几乎没有。

image.png

image.png

图六:这张图的表述可能并不全面或清晰,但可以做为一个参考。

image.png

图七:UI、 UX基本的工作项目来区分的话,UI没有品牌推广这个职位。

image.png

 

图八:从产品的角度看UI与UX,UI是产品的一部份,UX是使用产品的体验。

image.png

图九:UI Design:功能;Usabilitydesign:动作;User Experiene Design:情感;

image.png

图十:UI是用来取内容的工具,使用者使用UI吃完东西(内容)的体验是UX。

image.png

总结:UI设计是展现视觉层面的(界面),而UX是使用过程中的情感(互动与体验)。UX设计师不仅关注界面的设计,更关心所有会影响使用者体验的一切。如架构、互动、内容与及使用者对象、需求、价值观。

有人会说设计UI不就是在设计UX吗?如果用户的体验只注重视觉界面的美观,或许可以这么说。但是使用者手上拿的不是UI,而是产品,UI只是产品设计的一部份,体验不仅受到产品的影响,还会受到使用产品体验过程中的情境及使用者对品牌印像等等其它体验相关的事影响。

转载:微信公众号UI设计

UI欣赏:大圆角 UI 设计:从功能妥协到美学符号的演进

清阳

大圆角设计并非凭空出现,其起源可追溯至早期图形界面时代。在 CRT 显示器时代,像素密度低且显示边缘易出现锯齿,设计师通过圆角弱化视觉毛刺,这是基于技术限制的功能妥协。随着显示技术升级,圆角逐渐从 “必要修正” 转变为 “美学选择”,2013 年 iOS 7 的扁平化革命中,大圆角首次大规模应用于图标与控件,打破拟物设计的硬朗边界,开启现代 UI 的柔和风格浪潮。

在应用方案上,大圆角设计需结合场景平衡功能性与美观度。在移动端界面中,卡片式布局常搭配 16-24px 大圆角,如微信读书的书籍卡片,既通过圆角区分内容模块,又降低手持设备的视觉压迫感;针对儿童应用或生活服务类 APP,32px 以上的超大圆角能传递亲和力,例如美团 APP 的功能入口图标,圆润形态更易吸引用户点击。

在桌面端设计中,大圆角应用需考虑屏幕尺寸差异。Windows 11 的窗口采用 28px 圆角,在大尺寸显示器上营造轻盈悬浮感;而设计软件 Figma 的工具栏按钮则采用适中圆角,避免过度圆润导致的操作辨识度下降。此外,大圆角还可与阴影、渐变结合增强层次感,如苹果 macOS 的控制中心,通过 24px 圆角与柔和阴影,打造出符合物理直觉的 “半透明毛玻璃” 效果。

下面来欣赏一组优秀的大圆角UI设计。

 

640.png
by @ Budiarti R.

 

 

640 (1).png
by @ Budiarti R.
640 (2).png
by @ Afterglow
640 (3).png
by @ Budiarti R.

从技术妥协到设计语言核心,大圆角的演变折射出 UI 设计 “以人为本” 的趋势 —— 它不仅是视觉风格的迭代,更是对用户心理舒适度与交互体验的深度考量。

转载:UX设计便利店

软件开发公司到底在卖什么?不是代码,而是体验的 “底层逻辑”

清阳

在很多人眼中,软件开发公司的核心产出是 “代码”—— 一行行敲出的程序、一个个实现的功能,似乎是其价值的全部体现。但事实上,代码只是 “实现工具”,如同建筑师手中的砖瓦,真正决定建筑品质的是 “设计图纸与空间逻辑”。对软件开发公司而言,真正在售卖的,是支撑产品体验的 “底层逻辑”—— 它是隐藏在代码背后的 “用户认知适配方案、业务流程优化框架、系统可持续迭代体系”,是让复杂功能变得易用、让技术落地匹配需求、让产品持续创造价值的核心所在。尤其在企业级 SaaS、工业软件、医疗系统等复杂场景中,底层逻辑的优劣,直接决定了产品是 “用户的帮手” 还是 “使用的负担”。

一、先厘清:为什么 “代码≠价值核心”?

代码的本质是 “技术实现的载体”,具有 “可复制、可替代、标准化” 的属性 —— 同样的功能,不同开发团队写出的代码可能不同,但只要逻辑清晰,最终都能实现相似效果。但体验的底层逻辑截然不同,它是 “基于用户需求与业务场景的定制化解决方案”,具有 “不可复制、高壁垒、决定体验天花板” 的特性。
举个典型案例:同样是 “企业采购管理系统”,A 公司的产品仅实现了 “订单录入、审批、发货” 的基础功能,代码量虽大,但用户使用时需在 5 个模块间反复切换,审批流程因未适配企业组织架构导致卡顿;B 公司的产品代码量未必更多,却通过底层逻辑优化,将 “采购流程” 拆解为 “需求提报→供应商筛选→订单创建→智能审批→物流跟踪” 的线性路径,适配 “部门负责人→采购专员→财务审核” 的角色权限,甚至加入 “历史数据推荐供应商、审批节点超时提醒” 的智能功能。两者的差距,显然不是 “代码质量” 决定的,而是 “底层逻辑是否匹配用户认知与业务需求”—— 前者卖的是 “代码堆砌的功能”,后者卖的是 “让采购效率翻倍的体验逻辑”。
进一步说,用户最终为产品付费,本质是为 “解决问题的效率” 付费:员工愿意用某款软件,是因为它能减少操作步骤、降低认知负担;企业愿意采购某套系统,是因为它能优化业务流程、提升管理效率。这些 “效率提升”,都依赖于底层逻辑的设计,而非代码本身。如果底层逻辑混乱,即便代码再精美、功能再全面,最终也会因 “难用” 被用户抛弃。

二、再拆解:体验的 “底层逻辑” 包含哪三大核心?

体验的底层逻辑不是抽象概念,而是由三个相互关联的部分构成,它们共同决定了产品的 “易用性、适配性、成长性”,也是软件开发公司价值的核心体现。
  1. 第一层:用户认知适配逻辑 ——“让系统懂用户,而非让用户学系统”
核心是 “将系统的技术逻辑,转化为用户能轻松理解的认知逻辑”,解决 “用户看不懂、不会用” 的核心痛点。它基于 “用户心理学、认知科学”,让产品的操作路径、信息呈现、反馈方式,与用户的 “直觉习惯、思维模式、使用场景” 高度匹配。

关键落地维度与案例:

  • 操作路径适配 “用户目标”:避免 “功能导向” 的设计,转而以 “用户完成任务的目标” 规划路径。例如某医疗电子病历系统,传统设计按 “患者信息→诊断记录→检查报告→处方开具” 的功能模块划分,医生需在不同模块间跳转;优化后的底层逻辑,按 “接诊→问诊→开检查单→写病历→开处方” 的医生工作流设计,每个步骤仅展示当前所需功能,医生操作步骤减少 60%,认知负担显著降低。
  • 信息呈现适配 “认知负荷”:遵循 “工作记忆理论”,将信息按 “核心→辅助→冗余” 分级,避免信息过载。例如某工业设备监控系统,原设计同时展示 100 + 台设备的 20 项参数,用户需逐行筛选故障信息;底层逻辑优化后,将 “故障设备名称、紧急程度、故障类型” 作为核心信息置顶,用红色警示栏突出,“正常设备参数” 折叠展示,用户发现故障的时间从 2 分钟缩短至 10 秒,完全契合 “紧急场景下用户优先关注异常信息” 的认知习惯。
  • 反馈方式适配 “操作预期”:确保用户的每一步操作都能获得 “即时、明确、符合预期” 的反馈。例如某表单系统,传统设计仅在 “提交后” 提示错误,用户需反复修改;优化后的底层逻辑加入 “实时输入验证”—— 输入手机号时格式错误,立即显示 “请输入 11 位有效手机号” 的红色提示,输入正确则显示绿色对勾,按钮点击后变为 “加载中” 状态避免重复操作,表单填写错误率从 40% 降至 12%。
  1. 第二层:业务流程优化逻辑 ——“让系统适配业务,而非让业务迁就系统”
核心是 “深入理解企业业务场景,将复杂的业务流程转化为高效的系统逻辑”,解决 “系统与业务脱节、无法支撑实际需求” 的痛点。它需要软件开发公司深入调研企业的 “组织架构、岗位职责、业务痛点、管理目标”,让系统成为 “业务的延伸”,而非 “额外的负担”。

关键落地维度与案例:

  • 角色权限适配 “组织架构”:避免 “一刀切” 的权限设计,按企业实际角色分工定制功能权限。例如某连锁零售企业的库存管理系统,总部采购总监需要 “查看全部门店库存、制定采购计划” 的权限,门店店长仅需 “查看本店库存、申请补货” 的权限,店员则只能 “录入销售数据、盘点库存”。底层逻辑通过 “角色 - 权限 - 数据” 的关联设计,确保不同角色只能看到与自己职责相关的功能与数据,既保障数据安全,又避免功能冗余导致的操作混乱。
  • 核心流程适配 “业务痛点”:针对企业现有流程中的 “卡顿环节”,通过系统逻辑优化提升效率。例如某制造企业的 “生产订单管理流程”,传统流程需 “生产部提报需求→采购部确认物料→财务部审核预算→总经理审批→生产部安排生产”,涉及 4 个部门、7 个手动环节,平均耗时 5 天;软件开发公司通过底层逻辑重构,将 “物料确认” 与 “供应商库存数据” 打通,“预算审核” 与 “财务系统” 自动对接,审批节点按 “订单金额” 智能分配(10 万以下由部门经理审批,10 万以上需总经理审批),最终流程耗时缩短至 1 天,手动操作环节减少 80%。
  • 数据流转适配 “决策需求”:让系统中的数据自动流转、分析,为企业决策提供支撑,而非仅作为 “存储工具”。例如某互联网公司的用户运营系统,底层逻辑设计了 “用户行为数据→标签化分类→精准推送→效果分析” 的闭环:用户浏览某类商品后,系统自动打上 “潜在兴趣标签”,运营人员可基于标签创建推送任务,推送后自动生成 “打开率、转化率、复购率” 的分析报告,无需手动导出数据再处理,运营决策效率提升 50%。
  1. 第三层:系统可持续迭代逻辑 ——“让系统能成长,而非一成不变”
核心是 “构建灵活、可扩展的技术架构与设计体系”,解决 “系统无法适配业务变化、后期迭代成本高” 的痛点。企业的业务需求不是静态的 —— 新业务上线、组织架构调整、政策法规变化,都需要系统随之调整。体验的底层逻辑,必须包含 “可持续迭代” 的基因,让系统能低成本、快速响应变化。

关键落地维度与案例:

  • 技术架构适配 “扩展需求”:采用 “模块化、组件化” 的设计,避免 “牵一发而动全身” 的代码耦合。例如某企业级 CRM 系统,将 “客户管理、销售跟进、合同管理、数据分析” 拆分为独立模块,每个模块通过标准化接口连接。当企业新增 “售后服务” 业务时,仅需开发 “售后服务模块” 并接入现有系统,无需修改原有代码,迭代周期从 3 个月缩短至 1 个月,成本降低 60%。
  • 设计体系适配 “一致性需求”:建立 “设计规范与组件库”,确保后期迭代时体验保持一致。例如某互联网金融 APP,软件开发公司在初期就搭建了包含 “色彩体系、字体规范、按钮组件、弹窗样式” 的设计系统,后期新增 “理财产品详情页、会员权益中心” 时,直接复用现有组件,既保证了界面风格统一,又减少了设计与开发的沟通成本,新页面上线效率提升 40%。
  • 数据架构适配 “长期价值”:设计 “可沉淀、可复用” 的数据模型,让数据随业务发展持续创造价值。例如某连锁餐饮企业的系统,底层数据架构不仅记录 “门店营收、客流量” 等基础数据,还关联 “菜品销售排行、用户点餐偏好、时段客流规律” 等维度,随着数据积累,系统可自动生成 “菜品优化建议、门店排班方案、促销活动策略”,为企业长期发展提供数据支撑,而非仅作为 “记账工具”。

三、再深入:底层逻辑如何决定 “产品的长期价值”?

如果说代码决定了产品 “能不能用”,那么底层逻辑决定了产品 “好不好用、能不能长期用”。尤其对企业级产品而言,底层逻辑的价值会随着使用时间推移不断放大,成为企业选择软件开发公司的核心决策因素。
以某大型制造企业的 ERP 系统为例:初期采购时,A 公司报价更低,承诺快速交付基础功能;B 公司报价更高,但重点强调 “适配企业生产流程的底层逻辑设计”。企业最终选择了 A 公司,初期确实快速上线了系统,但随着业务发展,问题逐渐暴露 —— 新增生产线后,系统无法适配新的生产流程,需重新开发核心模块;跨部门数据无法打通,导致库存与生产计划脱节;员工因操作复杂,实际使用率不足 50%。最终,企业不得不重新采购 B 公司的系统,虽然前期成本更高,但 B 公司的底层逻辑适配了 “多生产线协同、跨部门数据流转、员工角色分工”,不仅上线后使用率达 90%,后续新增业务时仅需简单配置即可扩展,长期来看反而降低了总成本。
这个案例印证了:企业采购软件,本质是采购 “长期解决问题的能力”,而这种能力的核心就是底层逻辑。软件开发公司的竞争,最终是 “底层逻辑设计能力” 的竞争 —— 谁能更深入理解用户需求、更精准适配业务场景、更前瞻规划迭代体系,谁就能提供真正创造长期价值的产品。

软件开发公司的 “价值重构”—— 从 “卖代码” 到 “卖逻辑”

随着技术的普及,代码的 “技术壁垒” 正在逐渐降低 —— 开源框架、低代码平台让功能实现变得越来越容易,但体验底层逻辑的 “设计壁垒” 却在不断升高。尤其在数字化转型加速的当下,企业对软件的需求已从 “有没有” 转向 “好不好用、能不能创造价值”,这要求软件开发公司重新定义自身价值:
不再是 “代码的生产者”,而是 “体验逻辑的设计者”—— 通过深入调研用户与业务,构建适配认知、优化流程、支撑迭代的底层逻辑,让技术真正服务于需求,让产品真正成为用户的 “帮手”。这才是软件开发公司真正在售卖的核心价值,也是其在市场竞争中建立差异化壁垒的关键所在。

 

 

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

 

image.png

交互设计公司是如何让复杂系统 “变简单” 的?层级交互模型解析

清阳

在企业级 SaaS、工业控制平台、医疗管理系统等领域,“复杂” 似乎是系统的天然属性 —— 多模块、多角色、多流程的交叉叠加,往往让用户陷入 “找不到功能、理不清逻辑、完不成任务” 的困境。而交互设计公司的核心价值,正是通过科学的设计方法论,将 “复杂的系统逻辑” 转化为 “简单的用户体验”。基于长期复杂系统交互设计实践,行业内提炼出 “层级交互模型”,通过 “任务层级拆解、信息层级聚焦、操作层级引导” 三大核心策略,让复杂系统从 “难用” 走向 “易用”,这也是众多企业解决系统复杂性问题的关键方法论。

一、先拆解:复杂系统让用户 “望而却步” 的 3 大核心痛点

复杂系统的 “难用”,本质不是 “功能太多”,而是 “设计没有匹配用户的认知与使用习惯”。通过大量用户调研发现,用户面对复杂系统时,最核心的痛点集中在三个层面,这也是层级交互模型需要解决的核心问题。
  1. 任务混乱:“不知道从哪开始”,目标与操作脱节
复杂系统往往包含 “多角色权限、多流程分支、多模块关联”,若设计时未对 “用户任务” 进行梳理,会导致用户打开系统后,面对满屏的功能按钮、菜单选项,无法快速定位 “实现目标所需的操作路径”。例如某企业 ERP 系统,包含 “采购管理、库存管理、财务核算、人力资源” 四大模块,每个模块下又有 10 + 个子功能,新用户需完成 “采购订单创建” 时,需在 “采购管理→供应商选择→订单录入→审批提交” 的路径中反复摸索,且流程中需多次切换模块(如选择供应商时需跳转至 “供应商管理” 模块),导致用户平均需尝试 3-4 次才能完成任务,任务成功率仅 45%。这种 “任务与操作脱节” 的设计,让用户陷入 “目标清晰但路径模糊” 的困境,直接降低使用意愿。
  1. 信息过载:“找不到关键内容”,认知负荷飙升
复杂系统需要呈现大量 “业务数据、状态信息、操作反馈”,若设计时未对 “信息优先级” 进行排序,会导致用户在使用过程中,需要从海量信息中筛选 “有用内容”,认知负荷远超大脑处理能力。例如某工业监控系统的 “设备状态页面”,同时展示 “100 + 台设备的运行参数(温度、压力、转速)、故障报警记录、维护计划、操作人员信息”,且所有信息用相同的字体、颜色、间距呈现,用户需要逐行浏览才能找到 “故障设备” 的关键信息,平均查找时间达 2 分钟,若遇到紧急故障,极易因 “信息筛选耗时过长” 导致处理延迟。这种 “信息堆砌” 的设计,让用户陷入 “需要的信息找不到,不需要的信息干扰判断” 的困境,严重影响使用效率。
  1. 操作复杂:“不知道下一步做什么”,流程缺乏引导
复杂系统的操作往往包含 “多步骤、多条件、多反馈”,若设计时未对 “操作逻辑” 进行优化,会导致用户在操作过程中,频繁遇到 “下一步操作不明确、操作结果无反馈、操作错误难纠正” 的问题。例如某医疗 HIS 系统的 “患者就诊流程”,包含 “挂号建档→医生诊断→开具处方→缴费取药” 四个核心步骤,但设计时未在界面上标注 “当前步骤 / 总步骤”,且 “开具处方” 后需手动跳转至 “缴费模块”(无自动引导),“缴费成功” 后也无 “取药窗口提示”,导致用户在步骤切换时频繁卡顿,流程完成率仅 58%。这种 “操作缺乏引导” 的设计,让用户陷入 “每一步都需要自行探索,且不确定操作是否正确” 的焦虑,直接影响业务效率。

二、深解析:层级交互模型的 3 大核心架构

“层级交互模型” 的核心是 “以用户为中心,将复杂系统的‘任务、信息、操作’按‘用户认知规律’拆解为不同层级,让用户在每一层级都能‘聚焦核心、减少干扰’”。该模型包含三个相互关联的核心层级,从 “任务目标” 到 “操作执行” 形成完整的体验闭环。
  1. 第一层:任务层级拆解 ——“从‘大目标’到‘小步骤’,让用户知道‘先做什么、再做什么’”
核心是 “按用户的任务目标,将复杂系统的‘大任务’拆解为‘可执行的小步骤’,并明确步骤间的逻辑关系”,解决 “任务混乱” 的痛点。在设计时,会通过 “用户任务地图” 梳理 “不同角色的核心任务”,再将每个任务拆解为 “3-5 个关键步骤”,确保步骤符合 “先易后难、先核心后辅助” 的用户习惯。

落地策略与案例:

  • 按角色拆解任务:避免 “权限与任务不匹配”
复杂系统的不同角色(如管理员、操作员、审核员),核心任务存在显著差异,设计时需为不同角色 “定制任务路径”。例如某企业 CRM 系统,为 “销售顾问” 角色拆解的核心任务是 “客户线索获取→客户跟进→订单创建→售后服务”,界面仅展示与该任务相关的功能(如 “线索列表、跟进记录、订单录入”);为 “财务审核” 角色拆解的核心任务是 “订单审核→发票开具→款项确认”,界面仅展示 “待审核订单、发票管理、财务报表” 功能,避免角色看到 “无关功能” 导致任务混乱。优化后,不同角色的任务成功率提升至 85%,操作时间缩短 50%。
  • 按流程拆解步骤:避免 “步骤跳跃、逻辑模糊”
对单一任务,按 “用户直觉流程” 拆解为 “线性步骤”,并在界面上明确标注 “当前步骤 / 总步骤”,让用户清晰掌握任务进度。例如某采购管理系统的 “采购订单创建” 任务,被拆解为 “1. 选择供应商→2. 录入采购商品→3. 确认订单金额→4. 提交审批” 四个步骤,界面顶部固定 “步骤导航条”,当前步骤用高亮颜色标注,且每一步仅展示 “该步骤必需的操作项”(如步骤 1 仅展示 “供应商搜索、选择” 功能,不显示后续的 “商品录入” 字段)。优化后,用户订单创建时间从 30 分钟缩短至 10 分钟,错误率从 35% 降至 8%。
  • 按优先级拆分辅助任务:避免 “核心任务被干扰”
复杂任务往往包含 “核心操作” 与 “辅助操作”,设计时需将 “辅助操作” 折叠隐藏,优先展示 “核心操作”,避免干扰用户。例如某项目管理系统的 “项目创建” 任务,核心操作是 “填写项目名称、选择项目周期、分配负责人”,辅助操作是 “添加项目标签、上传项目文档、设置项目权限”,辅助操作被放在 “折叠面板” 中,用户完成核心操作后,可根据需求选择是否展开辅助操作。优化后,用户核心任务完成率提升至 92%,且因 “辅助操作不干扰核心流程”,用户满意度提升 40%。
  1. 第二层:信息层级聚焦 ——“从‘全量展示’到‘按需呈现’,让用户快速找到‘关键信息’”
核心是 “按用户的使用场景与任务需求,对系统中的‘信息’进行优先级排序,通过‘视觉层级设计’突出‘关键信息’,隐藏‘非关键信息’”,解决 “信息过载” 的痛点。在设计时,会通过 “信息优先级矩阵”,将信息分为 “核心信息(必需展示)、辅助信息(按需展示)、冗余信息(隐藏或删除)” 三类,再通过 “视觉设计元素(颜色、尺寸、间距、对比度)” 强化核心信息的存在感。

落地策略与案例:

  • 核心信息 “置顶 + 高亮”:确保 “第一眼看到”
将用户完成当前任务必需的 “核心信息”(如设备故障状态、订单审批结果、数据异常提示)放在 “界面视觉焦点区”(如顶部、左侧核心区域),并用 “高对比度颜色、加粗字体、特殊图标” 突出。例如某工业设备监控系统,“故障设备信息” 被放在界面顶部 “红色警示栏” 中,包含 “设备名称、故障类型、紧急程度”,并用闪烁图标提示;而 “正常设备的运行参数” 放在下方 “常规信息区”,用浅灰色字体展示。优化后,用户发现故障设备的时间从 2 分钟缩短至 10 秒,故障响应效率提升 90%。
  • 辅助信息 “折叠 + 按需展开”:避免 “干扰核心信息”
将用户在特定场景下才需要的 “辅助信息”(如历史数据、详细说明、关联文档)放在 “折叠面板、弹窗、抽屉式组件” 中,用户需要时点击展开,不需要时隐藏。例如某医疗电子病历系统,“患者基本信息(姓名、年龄、性别)” 作为核心信息置顶展示;“既往病史、过敏史、检查报告” 作为辅助信息,放在 “折叠面板” 中,医生查看时点击展开,不查看时自动隐藏。优化后,界面信息密度降低 60%,医生查找核心信息的效率提升 55%。
  • 冗余信息 “删除或隐藏”:减少 “认知干扰”
对与用户任务无关、或重复的 “冗余信息”(如过时的通知、重复的按钮、无关的广告),直接删除或隐藏,避免占用界面空间、干扰用户判断。例如某企业 OA 系统,原界面包含 “公司新闻、节日祝福、员工生日提醒” 等与 “办公任务” 无关的信息,这些冗余信息被全部删除,仅保留 “待办事项、审批流程、文件通知” 等核心办公信息。优化后,用户界面浏览时间缩短 40%,办公效率提升 35%。
  1. 第三层:操作层级引导 ——“从‘自行探索’到‘主动引导’,让用户知道‘下一步做什么’”
核心是 “按用户的操作流程,在‘关键节点’提供‘明确的引导与反馈’,帮助用户顺利完成操作,避免‘操作困惑、错误重试’”,解决 “操作复杂” 的痛点。在设计时,会重点关注 “操作前的引导、操作中的反馈、操作后的提示” 三个关键节点,确保用户在每一步操作中都能 “清晰感知、准确判断”。

落地策略与案例:

  • 操作前:“场景化引导”,明确 “为什么做、怎么做”
在用户执行复杂操作前,通过 “弹窗提示、步骤说明、示例演示” 等方式,告知用户 “操作目的、操作步骤、注意事项”,避免用户因 “不了解操作意义” 而放弃。例如某财务系统的 “税务申报” 操作,用户点击 “申报” 按钮后,会弹出 “税务申报引导弹窗”,包含 “申报目的:完成月度增值税申报,避免逾期罚款”“操作步骤:1. 上传财务报表→2. 核对申报数据→3. 提交税务部门”“注意事项:需在每月 15 日前完成申报”,并提供 “示例视频” 链接。优化后,用户税务申报成功率从 58% 提升至 92%,咨询客服的次数下降 70%。
  • 操作中:“实时反馈”,明确 “操作是否有效”
在用户执行操作时(如输入文字、点击按钮、选择选项),实时提供 “视觉反馈、文字反馈、状态反馈”,让用户知道 “操作已被系统接收,且是否正确”。例如某表单系统,设计了 “实时输入验证” 功能:用户输入手机号时,若格式错误,立即在输入框下方显示 “红色提示文字(请输入 11 位有效手机号)”;若格式正确,显示 “绿色对勾图标”;点击 “提交” 按钮时,按钮变为 “加载中” 状态(避免重复点击),并显示 “提交中,请稍候...” 文字提示。优化后,表单填写错误率从 40% 降至 12%,提交完成率提升 60%。
  • 操作后:“结果引导”,明确 “下一步做什么”
在用户完成操作后,除了告知 “操作结果(成功 / 失败)”,还需提供 “后续操作建议”,帮助用户衔接 “下一个任务”,形成 “任务闭环”。例如某项目管理系统,用户完成 “项目创建” 操作后,反馈界面包含 “操作结果:项目创建成功(绿色对勾)”“后续建议:1. 添加项目成员→2. 创建项目任务→3. 上传项目文档”,并提供 “一键跳转” 按钮,用户点击即可进入对应操作页面。优化后,用户从 “项目创建” 到 “项目启动” 的时间缩短 45%,项目启动率提升 50%。

三、看落地:层级交互模型的实战案例 —— 某工业物联网平台优化

某工业物联网平台包含 “设备管理、数据监控、故障预警、维护调度” 四大核心模块,涉及 “管理员、监控员、维护员” 三种角色,原系统因 “任务混乱、信息过载、操作复杂”,用户满意度仅 38%,维护响应延迟率达 40%。运用层级交互模型对其进行优化,具体落地效果如下:
  1. 任务层级拆解:按角色定制任务路径
  • 为 “监控员” 角色定制 “核心任务路径”:设备状态监控→故障识别→预警上报,界面仅展示 “设备状态列表、故障报警模块、上报按钮”,隐藏 “维护调度、数据报表” 等非核心功能;
  • 将 “故障上报” 任务拆解为 “1. 选择故障设备→2. 填写故障描述→3. 选择紧急程度→4. 提交上报” 四个步骤,界面顶部固定步骤导航条,当前步骤高亮显示。
  1. 信息层级聚焦:突出故障与关键数据
  • 核心信息:将 “故障设备名称、故障类型、紧急程度” 放在界面顶部 “红色警示区”,用加粗字体、闪烁图标突出;
  • 辅助信息:将 “设备历史故障记录、维护计划” 放在 “折叠面板” 中,监控员需要时点击展开;
  • 冗余信息:删除 “设备生产厂家、安装时间” 等与 “实时监控” 无关的信息。
  1. 操作层级引导:全流程提供反馈与建议
  • 操作前:故障上报时,弹窗提示 “紧急故障需在 10 分钟内上报,普通故障可在 30 分钟内上报”;
  • 操作中:选择故障类型时,实时显示 “该故障类型的常见原因(如‘温度过高:可能因散热风扇故障’)”;
  • 操作后:上报成功后,提示 “故障已上报至维护部门,预计维护人员 20 分钟内到达现场”,并提供 “查看维护人员位置” 的跳转按钮。

优化成果

  • 用户满意度从 38% 提升至 85%;
  • 故障上报成功率从 52% 提升至 98%;
  • 维护响应延迟率从 40% 降至 8%;
  • 新用户上手时间从 3 天缩短至 1 天。

四、层级交互模型的核心 ——“让系统适配用户,而非让用户适配系统”

复杂系统的 “简单化”,从来不是 “删减功能”,而是 “通过设计,让系统的逻辑与用户的认知、习惯、需求相匹配”。层级交互模型的本质是 “以用户为中心” 的设计思维在复杂系统中的落地 —— 通过 “任务层级拆解” 让用户 “知道做什么”,通过 “信息层级聚焦” 让用户 “找到关键内容”,通过 “操作层级引导” 让用户 “知道怎么做”,最终让复杂系统从 “用户需要学习适应” 转变为 “系统主动适配用户”。
对企业而言,复杂系统的 “易用性” 直接影响 “业务效率、用户留存、员工满意度”,而层级交互模型为解决系统复杂性问题提供了可落地的方法论。这也是众多企业能突破 “复杂系统难用” 困境的核心原因 —— 不是简单的界面美化,而是从 “用户体验底层逻辑” 出发,重构系统的交互设计,让复杂系统真正 “为用户服务”。

 

 

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

 

image.png

高端 UI 设计公司凭什么比模板更贵?

清阳

在 UI 设计领域,“模板” 似乎成了 “高性价比” 的代名词 —— 几百元就能买到成套的界面组件、几千元就能获取适配多端的设计素材,而高端 UI 设计公司的报价往往是模板的几十倍甚至上百倍。这种价格差距的核心,从来不是 “设计界面的数量” 或 “视觉精致度的高低”,而是 “价值维度的本质不同”:模板是 “标准化的素材堆砌”,解决的是 “有无界面” 的基础问题;而高端 UI 设计公司提供的是 “定制化的体验解决方案”,解决的是 “如何通过界面提升用户留存、促进商业转化、传递品牌个性” 的核心问题。高端 UI 设计的贵,贵在 “看不见的价值”,而非 “看得见的界面”。

一、先理清:模板与高端 UI 设计的 “价值底层差异”

模板与高端 UI 设计的价格差距,本质是 “标准化产品” 与 “定制化服务” 的价值逻辑差异。模板的核心优势是 “低成本、高效率”,但这种优势建立在 “牺牲个性、忽视体验、脱离商业目标” 的基础上;而高端 UI 设计的核心价值是 “精准匹配需求、深度优化体验、赋能商业增长”,这种价值需要通过 “调研、分析、迭代、落地” 的全流程服务实现,自然对应更高的成本与定价。
具体来看,两者的底层差异体现在三个维度:
价值维度
模板(标准化产品)
高端 UI 设计公司(定制化服务)
需求匹配度
通用化设计,仅支持基础修改(如换色、改文字),无法适配品牌独特需求(如医疗行业的 “严谨感”、儿童产品的 “趣味性”)
基于品牌定位、用户群体、业务场景做定制化设计,例如为高端金融 APP 设计 “低饱和色调 + 清晰信息层级”,贴合高净值用户的 “专业感” 需求
体验完整性
仅提供界面视觉素材,缺乏 “交互逻辑设计”“用户流程优化”“多端适配细节”,易出现 “界面好看但不好用” 的问题
从 “用户行为分析→交互逻辑设计→视觉落地→开发适配” 全流程把控,例如为电商 APP 优化 “商品详情→加入购物车→结算” 的路径,减少操作步骤,提升转化
商业关联性
与品牌的商业目标脱节,无法针对 “提升用户留存”“促进付费转化”“强化品牌认知” 做设计优化
以商业目标为导向设计,例如为会员制 APP 在 “会员权益展示区” 采用 “高对比色按钮 + 数据化权益说明”,提升会员开通率
这种底层差异决定了:模板适合 “预算有限、无明确商业目标、仅需基础界面” 的场景(如个人博客、小型工具类产品);而高端 UI 设计适合 “追求品牌个性、重视用户体验、需通过界面实现商业目标” 的场景(如高端品牌 APP、企业级 SaaS 系统、核心业务平台)。两者解决的不是 “同一维度的问题”,价格差距自然显著。

二、再拆解:高端 UI 设计公司 “贵在哪”?4 个核心价值维度

高端 UI 设计公司的报价,从来不是 “按界面数量收费”,而是 “按价值贡献收费”。这些价值藏在 “设计前的调研”“设计中的优化”“设计后的落地” 等环节,是模板无法提供的 “隐性服务”。
  1. 前期调研:基于 “数据与需求” 的设计,避免 “拍脑袋决策”
模板的设计逻辑是 “通用化适配”,无需考虑具体的用户群体与业务场景;而高端 UI 设计的第一步,是通过深度调研明确 “为谁设计、设计什么、如何设计”,这一步的成本占比可达项目总成本的 20%-30%,却是设计 “不脱离需求” 的关键。
高端 UI 设计公司会通过两种核心调研,为设计提供依据:
  • 用户调研:明确 “用户需要什么”
通过用户访谈、问卷调研、行为数据分析,掌握目标用户的 “使用习惯、痛点需求、体验偏好”。例如为老年健康 APP 设计时,调研发现 “60 岁以上用户更习惯‘大字体、高对比色、简化操作’”,因此设计时将按钮尺寸从 44px 放大至 60px,文字颜色从浅灰色改为深黑色,减少 “二级菜单” 数量,直接在首页展示核心功能(如 “在线问诊、用药提醒”)。这种基于用户需求的设计,能让 APP 的老年用户留存率提升 40%,而模板的 “通用化界面” 无法做到这种精准适配。
  • 业务调研:明确 “商业需要什么”
与品牌方深度沟通 “核心业务目标、关键转化路径、品牌个性定位”,让设计服务于商业增长。例如为高端生鲜电商 APP 设计时,业务目标是 “提升高客单价商品的复购率”,因此设计团队在 “商品详情页” 加入 “食材溯源信息(如产地实拍、检测报告)”“烹饪建议(如食谱推荐、搭配食材)”“会员专享价提示” 等模块,用界面设计强化 “高端、安全、便捷” 的品牌认知,最终高客单价商品的复购率提升 25%。这种 “业务导向” 的设计,需要对品牌业务有深度理解,模板完全无法替代。
  1. 交互逻辑设计:让 “界面好用”,而非仅 “好看”
模板的核心是 “视觉素材”,几乎不包含 “交互逻辑设计”—— 用户点击按钮后跳转哪里、滑动页面时如何反馈、表单填写时如何提示,这些 “看不见的操作逻辑” 往往需要用户自行摸索,易导致 “操作困惑、流程卡顿”。而高端 UI 设计公司的核心价值之一,是通过 “交互逻辑设计” 让界面 “好用”,降低用户的 “操作成本” 与 “认知负担”,这也是 “体验感” 的核心来源。
例如某企业 SaaS 系统的 “客户管理模块”,模板提供的界面仅包含 “客户列表 + 添加按钮”,用户需要 “点击添加→填写 15 个字段→提交” 才能完成客户录入,且字段无先后顺序、无填写提示,导致用户录入效率低、错误率高;而高端 UI 设计公司优化后:
  • 交互逻辑上:将 “15 个字段” 按 “基础信息(必填)→扩展信息(选填)” 拆分,优先展示必填项,选填项折叠隐藏;加入 “实时填写提示”(如 “手机号格式错误时即时标注”)、“字段关联推荐”(如选择 “行业” 后,自动推荐相关 “客户标签”);
  • 操作流程上:支持 “批量导入客户数据”“从历史客户复制信息”,减少重复录入;
  • 反馈设计上:提交成功后不仅提示 “录入完成”,还推荐 “下一步操作(如‘为客户分配跟进人员’)”。
优化后的界面,用户客户录入效率提升 60%,错误率下降 70%—— 这种 “交互逻辑设计” 是模板无法提供的,需要设计师具备 “用户行为分析能力” 与 “业务流程理解能力”,对应的人力成本与时间成本自然更高。
  1. 品牌个性传递:让界面成为 “品牌的视觉延伸”
模板的视觉设计是 “通用化风格”(如极简线性、扁平色块、渐变质感),无法传递品牌的 “独特个性”—— 无论是高端奢侈品牌还是亲民快消品牌,用同一套模板设计出的界面,都会显得 “千篇一律”,无法让用户形成 “品牌记忆”。而高端 UI 设计的核心价值之一,是将 “品牌个性” 融入界面设计,让用户通过界面 “感知品牌调性”,强化品牌辨识度。
例如同样是 “购物车图标”,不同品牌的 UI 设计会传递不同的个性:
  • 高端奢侈品品牌:设计为 “金属质感的购物袋图标 + 细微的皮革纹理”,搭配低饱和的金色调,传递 “精致、高端” 的品牌个性;
  • 儿童玩具品牌:设计为 “圆润的卡通购物车图标 + 彩色渐变效果”,搭配活泼的橙色调,传递 “可爱、有趣” 的品牌个性;
  • 户外探险品牌:设计为 “硬朗的帆布材质购物车图标 + 做旧效果”,搭配深绿色调,传递 “耐用、冒险” 的品牌个性。
这种 “品牌化的 UI 设计” 需要通过 “品牌视觉体系梳理(如色彩、字体、图形元素)→界面视觉落地→一致性把控” 的全流程实现。例如某高端茶饮品牌 APP,设计团队将品牌的 “茶绿色” 作为主色调,字体选用 “柔和的衬线体”,界面元素融入 “茶叶纹理、茶杯轮廓” 等品牌符号,甚至在 “加载动画” 中设计 “茶叶飘落” 的效果 —— 用户打开 APP 的瞬间,就能通过界面感知 “自然、雅致” 的品牌调性,这种 “品牌个性传递” 的价值,是模板无法替代的,也需要设计师投入大量时间做 “品牌视觉与 UI 设计的融合”。
  1. 全流程落地支持:确保 “设计不打折”,避免 “体验失真”
模板的交付是 “一次性的素材打包”,后续如何适配开发、如何解决界面与技术的冲突、如何优化上线后的体验问题,都需要用户自行处理;而高端 UI 设计公司的服务,从 “设计落地” 到 “上线迭代” 持续覆盖,确保设计价值不被 “开发适配” 或 “后期维护” 损耗,这也是其价格中 “服务成本” 的重要组成部分。
具体来看,高端 UI 设计公司的落地支持包含三个核心环节:
  • 设计标注与资产交付:提供 “精细化的设计标注”(如字体大小、颜色值、间距、组件状态),输出 “可直接用于开发的设计资产”(如切图、组件库、交互原型),避免开发因 “理解偏差” 导致界面变形。例如为某智能硬件 APP 设计时,设计师标注 “按钮圆角为 8px、阴影参数为‘0 2px 8px rgba (0,0,0,0.1)’”,并提供 “不同分辨率的切图”,确保开发还原度达 95% 以上,而模板的 “模糊标注” 易导致开发还原度仅 60%-70%;
  • 开发联调支持:设计师全程参与开发联调,解决 “设计与技术的冲突”。例如开发发现 “设计的‘动态渐变背景’在低端机型卡顿”,设计师会同步优化为 “静态渐变 + 轻微动画”,既保留视觉效果,又适配技术限制;若开发实现的 “表单交互逻辑” 与设计预期不符,设计师会现场调整交互原型,确保体验不变形;
  • 上线后体验迭代:基于上线后的用户数据(如点击热图、停留时间、转化路径),提供 “体验优化方案”。例如某电商 APP 上线后,数据显示 “商品详情页的‘加入购物车’按钮点击率低”,设计师通过分析发现 “按钮颜色与背景对比度不足”,优化为 “高对比色按钮” 后,点击率提升 35%—— 这种 “数据驱动的迭代优化”,是模板无法提供的长期价值。

三、最后算笔账:高端 UI 设计的 “贵”,是 “长期性价比” 而非 “短期成本”

很多人只看到高端 UI 设计的 “前期报价高”,却忽略了 “长期价值回报”:模板虽然前期成本低,但可能因 “体验差” 导致用户流失、转化低下,最终造成 “隐性损失”;而高端 UI 设计虽然前期成本高,但能通过 “提升用户留存、促进商业转化、强化品牌认知” 带来长期回报,其 “性价比” 远高于模板。
举个实际案例:某互联网金融 APP 初期使用模板设计,前期成本仅 5000 元,但因 “界面混乱、操作复杂”,用户注册完成率仅 30%,月活用户流失率达 40%;后来委托高端 UI 设计公司做定制化设计,报价 50 万元,设计后用户注册完成率提升至 75%,月活用户流失率降至 15%,仅 3 个月就通过 “用户增长带来的营收提升” 收回了设计成本,后续每月因 “用户留存提升” 带来的额外营收超 100 万元。
对品牌而言,UI 设计不是 “一次性的成本投入”,而是 “长期的价值投资”:模板的 “便宜” 是 “短期成本低”,但会牺牲 “长期增长潜力”;高端 UI 设计的 “贵” 是 “短期成本高”,但能带来 “长期的商业回报”。这种 “投资思维”,正是理解高端 UI 设计价格的关键。

高端 UI 设计的 “贵”,是 “价值的合理定价”

高端 UI 设计公司的贵,不是 “漫天要价”,而是 “基于价值的合理定价”—— 贵在 “前期调研的深度”,确保设计不脱离需求;贵在 “交互逻辑的优化”,确保界面好用易用;贵在 “品牌个性的传递”,确保设计强化认知;贵在 “全流程的落地支持”,确保价值不打折扣。这些价值维度,是模板无法覆盖的,也是品牌通过界面实现 “用户增长、商业转化、品牌沉淀” 的核心支撑。
对追求长期发展的品牌而言,选择高端 UI 设计公司,不是 “买界面”,而是 “买一套‘体验 + 品牌 + 商业’的解决方案”—— 这种解决方案带来的长期价值,远非几百元、几千元的模板所能比拟。这正是高端 UI 设计公司比模板更贵的根本原因。

高端网站设计的分水岭:为什么同样是官网,有的能留住用户,有的秒关?

清阳

在高端品牌数字化竞争中,官网早已不是 “可有可无的名片”,而是 “用户决策的关键触点”。但现实是,同样定位高端的网站,有的能让用户停留 5 分钟以上、主动浏览产品与服务,有的却被用户 “秒关”—— 这种差距的核心,从来不是 “视觉是否精致”,而是 “是否精准击中用户的‘停留阈值’”。用户打开官网的前 3 秒,会通过 “信息清晰度、价值感知度、体验流畅度” 快速判断 “这个网站是否值得停留”;而高端网站设计的分水岭,正是能否在这 3 秒内打破 “秒关魔咒”,并通过持续的体验设计,让用户从 “短暂停留” 转向 “深度探索”。

一、先拆透:用户 “秒关” 官网的 3 个核心诱因

用户不会无缘无故关闭官网,“秒关” 本质是网站在 “用户需求与体验预期” 之间出现了严重偏差。结合高端用户(高净值个人、企业采购决策者、行业专业人士)的行为特征,可提炼出三大核心诱因,这些也是 “留客官网” 与 “秒关官网” 的首个分水岭。
  1. 信息混乱:让用户 “找不到重点”,直接失去耐心
高端用户访问官网时,往往带着明确的目标(如了解产品特性、核实品牌资质、咨询合作方案),若网站信息呈现混乱(如核心信息被冗余内容淹没、导航逻辑模糊、文案晦涩),用户会因 “筛选信息成本过高” 直接关闭页面。例如某高端智能制造品牌官网,首页堆砌了 “企业新闻、行业动态、产品广告、社会责任” 等 6 个模块,且每个模块都用相似的视觉权重,用户需反复滚动页面才能找到 “核心产品” 入口,最终首页跳出率高达 78%。这种 “信息堆砌” 的设计,本质是将 “用户的目标需求” 让位于 “品牌的自我表达”,导致用户在 3 秒内无法感知 “网站能为我提供什么”,自然选择秒关。
  1. 价值模糊:让用户 “看不到好处”,缺乏停留动力
高端用户更关注 “品牌能为我解决什么问题、带来什么独特价值”,若网站仅强调 “品牌有多高端”(如满屏的抽象画面、空洞的标语、无意义的动画),却不传递 “具体价值”,用户会因 “感知不到利益点” 而关闭页面。例如某高端咨询品牌官网,首页用了 30 秒的 “抽象水墨动画”,动画结束后仅显示 “引领行业未来” 的标语,未提及 “服务领域、核心优势、成功案例”,用户无法判断 “这家咨询公司能否解决我的业务难题”,秒关率达 65%。对高端用户而言,“高端感” 不是靠 “抽象视觉” 营造的,而是靠 “具体的价值传递” 证明的 —— 看不到价值,再精致的设计也无法留住用户。
  1. 体验卡顿:让用户 “受够了麻烦”,被迫放弃停留
即使信息清晰、价值明确,若网站存在 “加载慢、交互卡、适配差” 等体验问题,仍会被用户秒关。高端用户对 “流畅度” 的预期远高于普通用户:他们习惯了 “点击即响应、滑动无卡顿” 的体验,若网站加载超过 2 秒、按钮点击无反馈、在电脑端显示正常却在手机端错乱,会直接触发 “体验差评”,导致秒关。例如某高端奢侈品官网,因使用大量未压缩的高清图片,首页加载时间长达 8 秒,且在手机端浏览时,产品图片会出现 “拉伸变形”,用户在等待加载的过程中或看到错乱界面时,秒关率达 62%。对高端网站而言,“流畅体验” 是基础门槛 —— 连基础体验都无法保障,再高端的定位也会显得 “不专业”。

二、再聚焦:“留客官网” 突破分水岭的 3 个关键设计策略

“留客官网” 并非天生就能留住用户,而是通过精准的设计策略,逐一破解 “秒关诱因”,并建立 “用户停留的正向循环”。这些策略也是高端网站设计的核心分水岭,从 “信息、价值、体验” 三个维度,让用户从 “秒关” 转向 “深度停留”。
  1. 策略一:信息分层设计 —— 让用户 “3 秒找到重点”,降低筛选成本
核心是 “以用户目标为核心,梳理信息优先级”,让用户在打开官网的瞬间,就能捕捉到 “核心信息”,无需在冗余内容中浪费时间。这是 “留客官网” 打破秒关魔咒的首要步骤。
  • 首页:聚焦 “核心价值 + 明确入口”
摒弃 “大而全” 的首页逻辑,采用 “1 个核心价值 + 3 个关键入口” 的极简结构:核心价值用 “短句 + 场景化画面” 传递(如高端医疗品牌的 “3 天快速预约,专属医师 1 对 1 诊疗”),关键入口对应用户的核心目标(如 “产品中心、资质查询、咨询预约”),且用差异化的视觉设计(如不同颜色的按钮、清晰的图标)突出。例如某高端私立医院官网首页,顶部用 “‘一站式健康管理’+ 医师问诊场景图” 传递核心价值,下方并列 “预约挂号、体检套餐、医师团队” 三个入口,用户 3 秒内就能明确 “网站能解决我的健康需求,且知道如何操作”,首页跳出率降至 22%。
  • 导航:遵循 “用户习惯 + 行业逻辑”
避免 “自定义导航名称”,采用用户熟悉的行业通用词汇(如高端家居品牌用 “产品系列” 而非 “生活美学”,高端金融品牌用 “理财产品” 而非 “财富方案”),同时按 “用户决策路径” 排序(如 “了解产品→查看案例→咨询合作→关于我们”)。例如某高端工业设备品牌官网,导航栏按 “产品中心→应用案例→技术优势→售后服务→联系我们” 排序,完全贴合企业采购者 “先看产品、再验证实力、最后谈合作” 的决策逻辑,用户无需思考就能找到目标模块,导航点击准确率提升 80%。
  • 文案:用 “直白表述 + 数据支撑” 替代 “抽象标语”
高端不代表 “晦涩”,文案需用用户能快速理解的语言,传递具体信息。例如将 “我们致力于为客户提供卓越的解决方案” 改为 “为 300 + 世界 500 强企业提供定制化设备,平均降低 15% 生产成本”;将 “产品品质领先行业” 改为 “产品通过 8 项国际认证,核心部件使用寿命超 10 年”。这种 “具象化文案” 能让用户在 3 秒内感知 “品牌的实力与价值”,比抽象标语的停留转化率提升 50%。
  1. 策略二:价值可视化设计 —— 让用户 “一眼看到好处”,激发停留动力
核心是 “将品牌的‘抽象价值’转化为‘用户可感知的具体利益’”,通过 “场景化呈现、差异化对比、证据化支撑”,让用户明确 “停留下来能获得什么”,从而主动延长浏览时间。
  • 场景化呈现:让用户 “代入自身需求”
避免 “孤立的产品展示”,将产品 / 服务融入用户的实际使用场景中,让用户直观感受到 “品牌能解决我的问题”。例如某高端定制家居品牌官网,“产品中心” 页面不只是展示家具图片,而是按 “别墅客厅、高端书房、亲子卧室” 等场景分类,每个场景都搭配 “用户痛点 + 解决方案” 的文案(如 “别墅客厅:解决‘大空间显空旷’问题,通过模块化家具组合,打造层次感与互动性”),用户能快速代入自身场景,页面平均停留时间从 40 秒延长至 3 分钟。
  • 差异化对比:让用户 “看到独特优势”
高端市场从不缺竞品,用户会下意识对比 “这家品牌与其他品牌的区别”。官网需主动展示 “差异化优势”,而非让用户自行判断。例如某高端咨询品牌官网,专门设置 “为什么选择我们” 模块,通过 “表格对比” 清晰呈现 “自身与行业竞品” 在 “服务周期(30 天 vs 60 天)、团队资质(10 年以上行业经验 vs 5 年以下)、成功案例(50 + 行业头部客户 vs 10 + 中小客户)” 的差异,用数据证明 “选择我们能获得更高效率、更专业服务”,该模块的点击转化率达 45%,显著降低用户的决策犹豫。
  • 证据化支撑:让用户 “相信价值真实”
高端用户对 “品牌宣传” 持谨慎态度,需用 “权威认证、客户证言、实际案例” 等证据,验证价值的真实性。例如某高端航天科技品牌官网,“关于我们” 页面除了企业简介,还突出展示 “国家级高新技术企业认证、ISO9001 质量体系认证” 等资质证书(支持点击查看详情),同时加入 “与某航天院所合作的卫星部件研发案例”(含项目背景、解决方案、交付成果),用权威证据与真实案例增强信任,用户对 “品牌实力” 的认可度提升 60%,愿意进一步浏览 “合作咨询” 模块。
  1. 策略三:流畅体验设计 —— 让用户 “用得舒服”,避免被迫离开
核心是 “消除所有可能导致用户卡顿、困惑、烦躁的体验问题”,从 “加载速度、交互反馈、多端适配” 三个基础维度,保障用户 “流畅浏览、轻松操作”,这是 “留客官网” 的底线要求。
  • 加载速度优化:控制在 “2 秒以内”,避免等待流失
高端用户没有耐心等待缓慢加载的页面,需通过 “资源压缩、懒加载、CDN 加速” 等技术手段,将首页加载时间控制在 2 秒以内。例如某高端汽车品牌官网,将首页的高清视频改为 “序列帧动画”,未在首屏显示的图片采用 “懒加载”(滚动到可视区域再加载),同时通过 CDN 加速分发静态资源,首页加载时间从 5 秒缩短至 1.8 秒,因 “加载慢” 导致的秒关率下降 40%。对高端网站而言,“快” 不仅是体验需求,更是 “专业度” 的体现 —— 加载慢的网站,会让用户潜意识里认为 “品牌连官网都做不好,产品与服务也未必可靠”。
  • 交互反馈设计:“操作即有响应”,增强控制感
避免 “操作无反馈、反馈不清晰” 的问题,确保用户的每一个操作(点击按钮、滑动页面、填写表单)都能获得即时、明确的响应。例如某高端金融品牌官网,“咨询按钮” 点击后,不仅会改变颜色(从蓝色变为深蓝色),还会弹出 “已收到您的咨询请求,客服将在 5 分钟内联系您” 的提示;表单填写时,实时提示 “字段是否填写正确”(如手机号格式错误时,用红色文字标注 “请输入 11 位有效手机号”)。这种 “即时反馈” 能让用户感受到 “操作被重视、流程可控”,表单提交完成率提升 35%,避免因 “操作无响应” 导致的中途离开。
  • 多端适配设计:“在哪看都舒服”,覆盖全场景需求
高端用户可能在 “电脑端(办公室)、平板端(会议室)、手机端(通勤途中)” 等多场景访问官网,若网站仅适配单一设备,会导致其他设备上的体验极差。需采用 “响应式设计”,确保官网在不同尺寸的屏幕上,都能保持 “信息清晰、操作方便”。例如某高端法律咨询品牌官网,在电脑端展示 “完整的案例库、团队介绍、服务流程”;在平板端简化 “非核心模块”(如隐藏部分新闻动态),突出 “咨询入口、核心服务”;在手机端进一步优化 “操作路径”(如将 “预约咨询” 按钮固定在底部,支持一键拨打客服电话),多端适配后,手机端的平均停留时间从 30 秒延长至 2 分钟,因 “适配差” 导致的秒关率下降 35%。

三、深挖透:“留客官网” 的进阶分水岭 —— 从 “停留” 到 “转化”

真正优秀的高端官网,不仅能 “留住用户”,还能 “引导用户完成转化”(如提交咨询、预约体验、下载资料)。而从 “停留” 到 “转化” 的进阶分水岭,在于是否能通过 “精准的引导设计、信任的持续传递、无压力的转化路径”,让用户从 “被动浏览” 转向 “主动行动”。
  1. 精准引导:用 “低干扰、高关联” 的设计,引导用户行动
避免 “强制弹窗、频繁广告” 等引起用户反感的引导方式,而是通过 “场景化引导、关联式引导”,让用户 “自然愿意行动”。例如某高端医疗美容品牌官网,在 “项目介绍” 页面的末尾,加入 “想了解‘该项目是否适合你’?点击预约免费面诊,获取专属方案” 的引导文案,且按钮用 “低饱和度的粉色”(贴合品牌调性,不刺眼),这种 “与内容高度关联” 的引导,转化率比强制弹窗高 40%;同时,避免在用户刚进入页面时就弹出引导,而是在用户浏览完核心内容(如项目优势、医生资质)后再出现,减少干扰感。
  1. 信任深化:用 “细节传递专业”,消除决策顾虑
高端用户的转化决策,往往需要 “持续的信任支撑”,需在 “转化关键节点”(如咨询前、预约前、购买前)加入 “信任强化细节”,消除用户的顾虑。例如某高端家居定制品牌官网,“预约测量” 按钮点击后,会弹出 “测量服务说明”(含 “免费上门、无隐形消费、测量师均持证上岗”),并附上 “测量师工作证件” 的示例图;同时,在 “售后服务” 页面,加入 “安装师傅上门时会佩戴工牌、穿鞋套、保护家具与地板” 的短视频,用这些细节传递 “专业、可靠” 的品牌形象,预约测量的转化率提升 30%。
  1. 转化路径:“步骤越少越好”,降低行动门槛
避免 “复杂的转化流程”(如多步骤注册、繁琐的表单填写),尽可能简化路径,让用户 “轻松完成行动”。例如某高端企业服务品牌官网,“咨询合作” 的转化路径从 “注册账号→登录→填写表单→提交” 简化为 “填写姓名 + 手机号 + 需求简述→提交”,且支持 “微信快捷登录”(无需注册);同时,表单字段仅保留 “必要信息”(删除 “公司规模、行业类型” 等非核心字段),表单提交完成率提升 50%。对高端用户而言,“简洁的转化路径” 不仅是体验需求,更是 “对用户时间的尊重”—— 步骤越少,用户越愿意完成转化。

高端网站设计的分水岭,是 “以用户为中心” 的落地深度

同样是高端官网,有的秒关、有的留客,差距的核心从来不是 “视觉精致度”,而是 “是否真正站在用户角度思考”。用户不会为 “品牌的自我感动” 停留,只会为 “自己的需求被满足、价值被感知、体验被尊重” 停留。高端网站设计的分水岭,正是能否突破 “品牌视角” 的局限,从 “用户的 3 秒停留阈值” 出发,用 “清晰的信息、明确的价值、流畅的体验” 打破秒关魔咒,并通过持续的信任传递与精准引导,让用户从 “短暂停留” 走向 “深度转化”。
对高端品牌而言,官网不是 “展示工具”,而是 “用户关系的起点”—— 只有跨越这道分水岭,才能让官网真正成为 “留客的磁石”,而非 “流量的漏斗”。
 

日历

链接

个人资料

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

存档