ui设计公司 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

072024-11

顶尖UI设计公司：设计潮流的引领者与创造者

蓝蓝设计的小编

在未来的发展中，兰亭妙微UI设计公司将继续发挥其引领者和创造者的作用，通过创新的设计理念和先进的技术手段，为客户提供更加卓越的UI设计服务，推动整个数字化时代的发展。

评论(0) 浏览(525)

172024-10

用户体验设计必备知识之支持可用性的交互设计原则

资深UI设计者

本文主要结合常见的移动端产品分享支持可用性的交互设计基本原则。文章图片较多请耐心等待加载清晰后查看。

评论(0) 浏览(835)

162024-10

HMI 车机应用设计规范

资深UI设计者

大家好呀，今天来聊聊华为车机应用设计规范。

评论(0) 浏览(501)

162024-10

有了 AI 界面变得更有视觉感啦！

资深UI设计者

涉及软件：Midjourney、Photoshop、Sketch

作者：黑马青年

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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(544)

162024-10

UI设计师如何利用好AI～

资深UI设计者

ai越来越热，无数信息和新闻铺天盖地的涌现，身处信息潮的普通的设计师的一员，我从焦虑、迷茫再到坚定，AI终将只是一个工具而已，我们无需害怕，只需要不断地学习和应用，保持自身的竞争力。

评论(0) 浏览(679)

142024-10

色盲不迷茫：股票UI设计突围之路

资深UI设计者

在股票市场中，色盲或色弱的投资者面临着独特的挑战。传统的用户界面设计通常依赖颜色来区分不同的信息，这为这些投资者带来了额外的困难。本文将探讨色盲投资者在使用股票市场应用时所面临的困境，并提出基于UI设计原则的解决方案，以帮助他们更好地理解和利用市场数据

评论(0) 浏览(448)

142024-10

做UI设计，为什么你总是没有思路？

资深UI设计者

当我第一次踏足UI设计这一行业的时候，我认为，UI设计的终极目标就是打造最完美的用户体验，当时的我对很多“体验不够完美”的产品嗤之以鼻，觉得为什么这个地方的设计是这样的，改成这样或者那样，岂不是更加友好。然而，在一次又一次的工作中，这些实战的商业项目不断地刷新了我的认知，让我对UI设计这一岗位又有了更多更深的理解。

评论(0) 浏览(434)

122024-10

中世纪古典风《Sirius Wars》游戏UI设计-虚拟项目

资深UI设计者

在中世纪的古老大陆上，有一个名为瑟兰迪尔的王国。这里处处弥漫着古典的韵味，宏伟的城堡诉说着往昔的辉煌，宁静的小镇与广袤的田野相映成趣。然而，当那颗神秘而璀璨的天狼星在夜空中出现时，一场可怕的异变悄然降临。

评论(0) 浏览(577)

102024-4

设计方法论 I 超全面的页面分割设计指南

前端达人

当你打开一个页面，首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内，既保证内容的完整性，又让用户能够轻松理解和浏览，这背后的奥秘就在于页面分割。今天，我们就来一起

探讨页面分割的艺术与技巧

，看看它是如何为你的设计增添魅力，提升用户体验的。

在设计中，页面分割不仅仅是一种技术手段，更是一种艺术表现。它如同一位细心的画师，巧妙地运用线条、色彩、空白等元素，

将页面内容划分为一个个清晰、有序的区域。

通过这些分割，用户能够更快速地找到所需信息，更轻松地理解页面内容，从而享受到更加愉悦的阅读体验。

页面分割的魅力在于其

多样性和灵活性

。不同的页面可以采用不同的分割方式，如线条分割、卡片分割、留白分割等，以满足不同的设计需求和用户习惯。同时，页面分割也需要根据内容的实际情况进行合理调整，既要保证信息的完整性，又要避免过度分割带来的混乱感。

在本文中，我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局，提升用户体验。同时，我们还将分享一些成功的页面分割案例，以激发你的设计灵感，为你的界面设计注入新的活力。

分享目录：

一、分割的常见样式

二、线性分割

三、卡片分割

四、留白分割

五、总结

线性分割：

通过使用线条来划分页面的不同区域，以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了，能够清晰地展现出页面内容的层次和结构。

卡片分割：

卡片式设计是一种流行的界面分割方法，通过将内容划分为独立的卡片或区块，使用户能够更清晰地理解信息。每个卡片通常包含相关的内容，如文本、图片或按钮，以便用户快速浏览和交互。

留白分割：

主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感，降低视觉噪音，使设计看起来更简洁。

近年来，设计趋势从

“卡片式设计”转向了“去线化设计”，

即倾向于使用留白分割而非过多的线条分割，以实现更为简洁清晰的界面效果。设计师在选择分割方式时，应

优先考虑留白分割，其次是线性分割，最后是卡片分割

。这个选择顺序反映了设计界的一般原则，即在不影响信息传达的前提下，尽可能保持设计的简洁性。

线性分割的定义：

线性分割设计是一种在视觉设计中使用的技巧，它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于

提高页面内容的可读性和组织性，帮助用户更好地理解和浏览页面信息。

线性分割设计具有以下优势：

1.划分区域：

线性分割可以将页面划分为不同的区域或模块，使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息，提高阅读效率。

2.区分内容：

线性分割可以用来区分不同类型的内容，如文本、图片、图表等。通过线性分割，可以将这些内容进行分组或归类，使得页面更加整洁、有序。

3.引导视线：

线性分割可以引导用户的视线，帮助他们更好地理解页面内容。通过合理的线性分割设计，可以突出显示重要的信息或元素，引导用户关注到关键内容。

4.增强层次感：

线性分割可以增强页面的层次感，使得页面内容更加丰富、有深度。通过不同样式的线性分割，可以区分不同的信息层级，帮助用户更好地理解页面结构和内容关系。

使用原则：

在使用分割线时，我们应遵循一些原则，以确保其有效地帮助用户理解页面的组成，同时避免过度使用带来的视觉干扰。

1.分割线应当微妙而不过于显眼。

它们在布局中应该容易被用户注意到，但又不应成为焦点，以免分散用户的注意力。

2.分割线应被视为次要的元素。

只有在留白等其他设计手法无法有效起到分割作用时，才考虑使用分割线。它们应当是布局中的辅助工具，而不是主导元素。

3.谨慎使用分割线。

过度使用分割线可能会导致页面显得混乱和复杂。相反，我们应该用分割线来创建信息分组，而不是简单地分割每一个条目。通过审慎而恰当地使用分割线，我们可以有效地提升页面的可读性和用户体验。

图片来源于参考文章

线性分割三种类型：

通栏分割线、内嵌分割线和中间分割线。

1.通栏分割线（Full-bleed Dividers）：

通栏分割线通常横跨整个页面宽度，用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著，能够清晰地划分出不同的内容区块，使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。

2.内嵌分割线（Inset Dividers）：

内嵌分割线通常位于内容区域内部，用于分隔有锚点（如头像、图标等）的相关内容。这些锚点可以是图片、符号或小的图形元素，它们与分割线一起，帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中，用于展示有关联但不同类别的信息。

3.中间分割线（Middle Dividers）：

中间分割线位于两个内容区域之间，用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细，更注重于在视觉上划分空间，而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间，以提供清晰的结构和层次。

在大多数情况下，当信息层级较为简单（即信息层级≤2）时，使用分割线进行信息分割是一种有效的方法。然而，实际上，

如果留白间距足够大，我们也可以使用留白来达到类似的效果

。通过增大留白间距，我们可以创造出清晰的视觉区域划分，使得信息之间的界限更加明确。

与分割线相比，足够大的留白间距可以避免多余的线性元素干扰，让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验，使用户更加轻松地理解和消化信息。

因此，在

信息层级较简单的情况下，我们可以灵活地选择使用分割线或留白来进行信息分割

。通过调整留白间距，我们可以达到与分割线相似的效果，同时保持整体设计的简洁和清晰。

为了提升屏效

，我们希望在一屏内展示尽可能多的信息。在这种情况下，分割线的设计显得尤为重要，因为它们能够

有效地划分信息区域，使内容更加清晰、易于理解。

通过使用分割线，我们可以

将较多的信息条理化

，使得用户能够更快速地找到所需的内容。与没有分割线的布局相比，使用分割线能够

显著提高信息的可读性和可理解性。

在相同的信息布局下，分割线能够将信息区域明确地划分开来，

防止信息之间产生混淆或交叉

。这种划分不仅使得每个信息块更加独立，而且提高了信息之间的对比度，使用户能够更轻松地识别和区分不同的信息。

因此，当我们的目标是提高屏效并展示大量信息时，分割线的设计是一个关键要素。通过合理地使用分割线，我们可以确保信息布局更加清晰、有序，从而提高用户的阅读效率和满意度。（如下图）

线性分割在移动端页面设计中的应用场景广泛，尤其是在

需要清晰划分信息模块时

。如微信的聊天列表中，线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔，使得每条消息清晰可辨，方便用户快速浏览和定位到特定的消息。

线性分割还常用在各类

App的信息提示

中，如果有多条消息需要展示，线性分割可以用来

区分不同的消息组

。例如招商银行APP中，当用户收到多条未读消息时，每条消息之间可以通过线性分割进行区分，使得每条消息清晰可辨，方便用户逐一查看和处理。

在APP

需要用户填写信息和设置的表单页面中

，线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息，提高表单的填写效率和准确性，比如站酷的设置页面（如下图）

卡片分割的定义：

卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能，并且与其他卡片通过一定的间距或线性分隔进行区分。

卡片分割设计具有以下优势：

1.内容封装：

卡片分割设计将相关内容或功能封装在一个独立的卡片内，使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁，方便用户浏览和理解。

2.明确边界

：每个卡片通常具有明确的边界，通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立，方便用户进行区分和识别。

3.灵活布局：

卡片分割设计具有很高的灵活性，可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局，以达到最佳的视觉效果。

4.强调重点：

通过不同的视觉处理手法，如改变卡片的颜色、大小或样式等，可以突出显示重要的卡片或内容。这有助于吸引用户的注意力，引导他们关注到关键信息。

卡片的基本构成：

卡片是一个独立的主题性容器，旨在将内容和操作组合在一起。它可以包含多种元素，如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在，而是根据具体需求进行选择和配置。无论选择哪些元素，它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具，适用于各种场景和应用。

卡片分割常见的类型：

卡片分割可分为

通栏卡片

和

非通栏卡片

1、通栏卡片：

其特点是卡片占据整个页面宽度，没有左右边距。通栏卡片的设计可以提高布局的灵活性，使得页面内容更加宽敞和大气。同时，通栏卡片也可以更好地突出展示单条内容，引导用户的视线，提高阅读效率。

2.非通栏卡片：

与通栏卡片相比，它会在卡片的左右两侧留有边距，不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性，同时也有利于突出显示某些关键信息。

通栏卡片

通栏卡片相较于非通栏卡片，其设计特点在于去除了左右两端的留白，仅保留上下边距，从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度，进一步增强了内容的视觉冲击力。在通栏卡片中，卡片与背景的关系通常通过一条背景色块来抽象表现，这种简洁的处理方式避免了过多的视觉元素干扰，使得页面整体看起来更加整洁和统一。

通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性，使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。

非通栏卡片

通常采用带圆角的设计形式

，这种设计不仅赋予卡片一种柔和、圆润的视觉效果，还增强了用户的视觉舒适度。结合阴影效果以及四周的边距，非通栏卡片巧妙地形成页面留白，使得整体设计层次感更加丰富。

通过巧妙的投影设计以及前后颜色的精准设定，非通栏卡片成功地让内容与背景之间

产生视觉空间感

，进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力，还使得用户在浏览页面时能够更加轻松地

区分和聚焦关键信息

。

在页面设计中，非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容，非通栏卡片都能够通过其独特的视觉效果和设计元素，为用户带来更加舒适、美观的视觉体验。同时，非通栏卡片还具有良好的

适应性和灵活性

，可以根据不同的设计需求和用户习惯进行定制和调整，满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”

选择使用通栏分割线还是卡片分割，主要取决于你的设计目标和内容需求。以下是三个参考建议，帮助你做出更好的选择：

1.当内容已有自然分割线时：

如果你的主题内容本身就已经有明确的分割线，比如列表项、段落分隔等，那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块，使主题信息层次更加分明，提高用户的阅读效率。

2.当内容类型多样且占据较大空间时：

如果单个主题内部包含了多种类型的内容，如文字、图片、视频等，且这些内容在垂直方向上占据了较大的空间（例如，内容长度超过屏幕高度的一半），使用非通栏分割会更加合适。卡片能够有效地圈定内容范围，为用户提供一个明确的视觉边界，帮助他们更好地理解和消化信息。

3.当需要增强横向空间感时：

如果你希望扩展页面的横向空间，或者暗示用户可以横向滑动页面查看更多内容，那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则，帮助用户建立页面可以横向滑动的意识，从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。

卡片分割更适合图文混排

卡片分割设计以其独特的布局方式，成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中，

实现了内容的多样性与统一性的结合

。这种设计不仅让单屏区域能够显示更多内容，还通过合理的空间划分，确保了文字和图片之间的和谐共存，既维持了视觉的一致性，又

巧妙地平衡了文字和图片的视觉强度

。因此，在需要同时呈现多种内容和媒介的场景中，卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”

留白分割的定义：

留白分割是目前设计的主流趋势，越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），将信息进行自然的视觉分组。

留白分割具有以下优势：

1.突出重点信息：

通过增加间距，可以将关键信息与其他内容区分开来，使用户更容易注意到。

2.提高可读性：

适当的留白可以使文字或图形元素之间的界限更清晰，减少视觉干扰，从而提高用户的阅读效率。

3.增强设计感：

留白可以为设计增加呼吸感，避免元素过于拥挤，使整体布局更加和谐、美观。

当元素之间的间距保持均匀时，整个视觉呈现会显得平衡且协调，大脑默认为一个整体。然而，一旦元素的横向和纵向间距发生变化，我们的大脑会

基于接近性法则

，本能地将距离较近的元素视为一个整体或群组，这就是留白分割。（如下图）

留白分割在

有规律且卡片样式较多

的页面中表现尤为突出，在有大量卡片样式的页面中，每个卡片通常都包含一定的信息。通过留白分割，可以清晰地划分每个卡片的信息区域，使用户更容易区分和阅读每个卡片的内容，增加呼吸感，避免元素过于拥挤，从而提高整体的可读性。例如下图中主流的音乐类App

相反，如果在没有规律且页面内容较多的情况使用留白分割，则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中，图片从1～9张都有的情况下，使用留白分割，页面就会变得杂乱，影响视觉效果。而脉脉则采用了卡片式分割样式，页面模块则相对清晰很多。

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

评论(0) 浏览(1219)

132024-2

如何为用户提供正确的键盘输入类型？

前端达人

Android和iOS系统都设计了针对特定表单字段的指定键盘输入类型。但大多数开发人员未能在他们的代码中指定正确的键盘输入类型。这会导致移动设备上的表单完成效率变慢。本文以Android平台为例。

一、输入类型并不总是“文本”

大多数开发人员错误地将每个表单字段的输入类型设置为“文本”。这存在问题，因为每个表单字段的输入并不总是纯文本。通常都有一些字段要求输入带有数字或字母和数字组合的信息。当用户尝试填写这些字段时，他们应该看到一个数字或字母和数字组合的键盘。

不幸的是，当每个字段的输入类型都设置为“文本”时，它会强制用户使用文本键盘来输入数字或字母和数字组合，输入时举步维艰，不是误点，就是需要频繁切换，输入体验十分糟糕。

因此，请务必为每个表单字段指定输入类型，以便系统能够显示相应的键盘。除了指定输入类型，我们还应指定相关行为，例如输入法是否提供拼写建议、是否将句子的首字母大写，以及是否使用“完成”或“下一项”等操作键替换“回车”。

输入类型、行为、操作键整理如下：

例一. 邮箱地址字段

表单要求用户提供他们的邮箱地址是很常见的。当我们将输入类型设置为“邮箱地址”时，它会为用户提供一个针对邮箱地址输入的键盘。这个键盘不仅显示字母，还可以显示“@”和“.”，用户可以轻松地输入他们的邮箱地址。

例二. 姓名字段

英文名是专有名词，英语中专有名词的第一个字母要大写。我们将输入类型设置为“人名”，并且设置单词首字母大写。用户无需对英文字母进行大小写切换。

二、每个键盘对输入类型的反应可能不同

案例一：登录页面的密码输入

钉钉将密码框输入类型设置为“密码”。假定密码为 z0h0a0n0g。

百度输入法显示密码键盘，完成密码输入仅需点击 9 次。
搜狗输入法显示文本键盘，用户需在字母和数字之间切换，完成输入需点击 17 次。也支持长按第一行的字母输入数字。
微信输入法显示文本键盘，完成密码输入需点击 17 次。不支持长按字母输入数字。

案例二：登录页面的手机号输入

钉钉设置电话号码键盘右下角为“下一项”按钮。

百度输入法的键盘右下角显示“回车”，用户完成手机号输入后需手动获取密码文本框焦点。
搜狗输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
微信输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。

三、Input Type 助力产品输入体验的提升

通过应用 Input Type 你可以正确的为每个文本字段设置特定的输入类型，以及看到每个输入类型（以及输入类型的组合）如何影响键盘。

我最初开发此应用是为了促进工作中跨部门高效协同，但我希望通过此应用能够赋能给更多的人，提升协同效率的同时更好的提升产品输入体验。你可以在这里免费下载：

https://www.pgyer.com/vT29

Input Type这个工具需要安装在安卓手机上，如果没有安卓手机可以电脑上安装一个网易MuMu安卓模拟器就可以用。

应用截图

感谢阅读，以上就是本次分享的全部内容，希望你能从这篇文章中有所收获。

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

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

作者：交互设计师张楚
链接：https://www.zcool.com.cn/article/ZMTYwODAxMg==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(757)

« 1 2 3 4 5 6 7 ... 92 »

日历

链接

个人资料

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

首页

顶尖UI设计公司：设计潮流的引领者与创造者

用户体验设计必备知识之支持可用性的交互设计原则

HMI 车机应用设计规范

有了 AI 界面变得更有视觉感啦！

UI设计师如何利用好AI～

色盲不迷茫：股票UI设计突围之路

做UI设计，为什么你总是没有思路？

中世纪古典风《Sirius Wars》游戏UI设计-虚拟项目

设计方法论 I 超全面的页面分割设计指南

如何为用户提供正确的键盘输入类型？

分类

日历

链接

个人资料

存档