Blog

之前,小编和大家分享了同色系和邻近色的搭配技巧,本期我们将继续往UI设计配色方案探讨,说说色彩差异较大的对比搭配技巧及其特点。 相关阅读: 《单色搭配同样玩出多种花样?分享最适合新手的UI设计配色方案》 《分享最适合新手的UI设计配色方案:邻近色让界面色彩更协调丰富》 ———— 什么是对比色?色相环上相距120度到180度之间的颜色,我们称之为对比色,其中“黄-红-蓝”和“橙-紫-绿”是最典型的对比色。 由于对比色在色相环上的相距较远,色彩差异比较大,因而往往能给网站带来丰富的视觉层次和强烈的视觉层级。但在实际网页设计操作中,由于对比色的色彩差异较大,如果搭配上把控不好,容易产生刺眼、杂乱的感觉。 因此,我们可以通过以下方式进行色彩调和: ① 控制好画面的色彩比例 色彩比例越接近,冲击感越强,如果想让画面更有冲击力,可以使对比色之间的比例更加接近,但同时也比较难掌控。 因此,我们可以选出一种颜色作为主色调,另一种作为辅助色或点缀色,既能保证画面的统一性,又能具有鲜明的色彩对比视觉效果。 ② 降低明度、饱和度,调和其对抗性 在保持色相不变的基础上,改变对比色的明度和纯度,这样即可保留对比色的搭配特点,同时又可降低过强的视觉刺激感。 ③ 加入黑白灰缓冲其强烈的对抗性 黑白灰是万能的调和色,若想降低画面的视觉刺激感,除了降低色相的明度和纯度,还可添加白色使画面更加透亮;添加黑色让画面更沉稳;以及使用灰色保持中性态度。 【分享对比色的色彩搭配方案】 • • • 黄色和红色 • • • 红色和黄色同位暖色系,并且在色环上都拥有邻近色的共有色(橙色)。虽然红色和黄色的属性相似,但黄色明度高而红色明度,所以红配黄技能搭配统一又能很强的对比效果。 • • • 红色和蓝色 • • • 红色是色环上最暖的颜色,蓝色是最冷的颜色,红蓝搭配能形成了强烈的对抗性,具有强烈的视觉冲击力。 • • • 蓝色和黄色 • • • 蓝色明度较低会让整个界面显得低调沉闷,若加入明度很高的黄色,会形成非常高的对比性,让整个视觉效果产生鲜明的冲击力。 • • • 绿色和橙色 • • • 绿色和橙色的搭配,能让人联想起“橙子园”,因此这两者颜色搭配一起能让画面洋溢着大自然的气息,给人自然清新、朝气活力的感觉。 • • • 橙色和紫色…

之前,小编和大家分享了同色系搭配技巧,本期我们将继续往UI设计配色方案探讨,说说邻近色搭配技巧及其特点。 相关阅读:《单色搭配同样玩出多种花样?分享最适合新手的UI设计配色方案》 ———— 在UI设计中,邻近色搭配方案是比较常用的配色方案之一,能给人一种和谐统一、柔和亲切的效果。不过,由于邻近色与同色系相似,容易让画面略显单调,因此同样需要借助明度或纯度的变化,突出界面的主次、虚实的强弱之分。 什么是邻近色? 邻近色是指在色环中相邻的色彩,如黄与橙、橙与红、红与紫等。由于邻近色在色相上比较接近,冷暖属性和情感特性都比较类似,因此邻近色搭配并不会让UI设计产生高对比度,并能很好地保持画面的协调与统一,是UI设计中使用频率最高的配色方案之一。 值得注意的是,虽然邻近色搭配与同色系搭配都能保持画面的统一性,但前者能使层次感更为丰富,后者则容易让整体视觉效果略显单调。 邻近色的特点有哪些? 和对比色、互补色这类鲜明度较高的配色方案相比,邻近色能让画面显得更加和谐和协调;而与同色系搭配相比,邻近色在色相方面也会稍微丰富些。尽管如此,但邻近色仍存在色调过于单一、对比不够的问题。 因此,使用邻近色搭配方案时,一般需要拉开颜色之间的明度或纯度形成明暗对比,从而衬托出主体;也可以结合不同明度和纯度来使用,让画面呈现出层次变化,展现出不同的气质和视觉效果。 【分享邻近色搭配技巧】 • • • 黄色与橙色 • • • 由于橙色和黄色都属于非常明亮鲜艳的颜色,两者相配具有很和谐的过渡感,容易营造出轻松快乐的氛围,使整体UI设计充满活力和愉悦感。 • • • 橙色与红色 • • • 橙色和红色都是充满活力和激情的颜色,因而多用于促销活动等页面设计,展现出热闹、喜庆的氛围。 • • • 红色与紫色 • • • 在色彩属性中,红色属于暖色系,而紫色则属于冷色系,但它们都有相似的属性,具有奔放、大气、浪漫、高贵的特征。红色与紫色搭配时,适当提高色彩的明度,能增加UI设计的层次感,突出作品浪漫、华丽、高贵的一面。 • • • 紫色与蓝色 • • • 蓝色和紫色的明度很接近,两者搭配会让整体画面显得比较柔和。神秘梦幻的紫色搭配科技感十足的蓝色,显得UI设计十分前卫时尚,因此蒸汽波、波普艺术和赛博朋克等前卫时尚风格都会经常使用这一配色方案。 • • • 蓝色与绿色 • • • 蓝色明度低、绿色明度高,所以绿色和蓝色搭配,容易形成协调统一的基调,但又能达到一定的对比效果,能让人联想到蓝天绿地之美,给人一种平静、放松、清爽、舒适之感。 • • • 绿色与黄色…

大多数设计项目都倾向于使用多色调搭配,以获取丰富的视觉层次。当然,生活中也有不少作品只使用少量颜色,甚至是单色搭配也能做出优秀的设计。而在众多配色方案中,单色配色是最适合新手运用的,同时也是最容易掌握的配色方法之一。 什么是单色配色? 单色并不是指只有一种颜色,而是指只有一种色相。单色搭配虽然没有形成颜色的对比,但利用同色相中饱和度和明度的层次变化,同样能形成良好的视觉效果。 很多人以为单色搭配只有一种色相会让整个UI设计显得非常单调,但在很多设计项目中,单色搭配能呈现出极具表现力的一面,而且效果并不一定弱于多色调搭配。 以下是单色搭配的优秀设计案例分享: 可口可乐网站整个UI设计都以红色为主色调,非常符合它的品牌调性,而文本、背景和装饰元素则使用白色来突出,使整个画面层次更加丰富。 天猫促销UI设计中,使用紫色渐变对比,让画面形成丰富的明暗层次。同时,紫色的明度较低,可很好地承载白色文字信息。 台湾金马影展的海报使用黑色作为背景,可以很好地衬托绿色主题,给人一种深邃而又神秘的视觉感受。 单色配色方案有什么优点? 对新手设计而言,颜色使用越少,对画面的把控就越容易。再者,由于单色配色方案的色彩层级比较精简,能轻易达到整体色彩平衡的同时,还能产生低对比度的和谐美感,在视觉上形成协调统一的感觉。 下面,再来看看一些优秀的单色搭配的优秀设计案例分享: 这套电影海报设计并没有使用过多的颜色,而是通过蓝色明度的变化来丰富画面的层次,从而更好地传达智慧与科技的主题。 摩拜单车的海报以企业形象色(橙色)为主色调设计,在视觉上形成协调统一的感觉,同时还能向大众传达出强烈的品牌效应。 总的来说,单色配色方案的作品能展现其简约大气、色调干净、统一稳定等特点,容易给读者营造出和谐与平衡的感觉,也是新手设计师比较容易掌握的配色方案。 最后,说说单色配色方案该如何设计? HSB色彩模式是将颜色三属性进行量化,色相(H)以角度表示,饱和度(S)和亮度(B)以百分比表示。 确定基础色相(H)后,可通过调整饱和度(S)和亮度(B)来制作一套富有层次感的配色方案。 举个例子:以“H:255”为基础色,建立配色方案 ▲ 在色相和饱和度不变的情况,将亮度递减,可以获得逐渐变亮的颜色。 ▲ 在色相和亮度不变的情况,将饱和度递减,可以获得逐渐深沉的颜色。 ▲ 在色相和亮度不变的情况,将饱和度和亮度递减,可以获得逐渐变灰的颜色。 使用这种方法虽然获得同色相中的大量色彩样本,但你无需全部使用这些色彩样本,只需要挑选3-4种左右就可以。最后,调整色彩的明暗和饱和度,让配色更贴合设计目标。 由于单色配色色彩对比度没有多色调那么明显,因此配色方案需要形成明暗变化,构成一个阶梯型色阶,才能达到优秀的视觉效果。

色彩可以定义品牌基调,加强品牌形象的传递;也可以增强UI设计的可用性,吸引用户的注意力。但在实际操作中,要找到合适的配色方案并不容易,尤其是很多企业网站都要求将“时尚”元素融入于UI设计中。那么,如何通过改变色彩搭配让设计变时尚?这不仅要设计师掌握色彩的基础知识,更要在UI设计中多多实践。 如何通过改变色彩搭配让设计变时尚? 第一步 了解色彩搭配的基本原则 色彩搭配的最基本且重要原则就是“颜色间要相互协调”,而常见的颜色搭配包括: 单色搭配:单色搭配虽然没有形成颜色的层次,但形成了明暗的层次,能使整体界面非常和谐,可以说是永远不会出错的色彩搭配效果,但也很难给用户带来惊喜,适合新手尝试。 类比色搭配:类比色搭配能产生一种令人悦目、低对比度的和谐美感。在实际应用中,这种搭配同样能产生不错的视觉效果。 补色搭配:补色搭配能形成强烈的对比效果,传达出活力、能量、兴奋等意义。但补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大,否则会让整个界面非常刺眼。 分裂补色:分裂补色,即同时用补色及类比色的方法来确定颜色关系。这种颜色搭配既具有类比色的低对比度美感,同时又具有补色的力量感,能使整体效果既和谐又有重点。 原色搭配:三原色同时使用通常会比较少见。但在中西方文化中,红黄搭配非常受欢迎,应用范围也很广;蓝红搭配也很常见,但只有两者区域分离才显吸引,紧邻一起会产生冲突感。 二次色搭配:三种二次色同时使用,能轻易形成协调的搭配,使画面更具深度及广度,并显得整个画面非常舒适且吸引,这一点在其它颜色关系上很难找到。 第二步 创建调色板 考虑选择哪种配色方案及颜色的运用,随后弄清楚为什么要选择这些颜色、这些颜色有什么作用、表现出来怎样的效果等问题,这样创建调色板才更有效率。 第三步 将调色板限制在三种颜色 考虑过多颜色反而会让用户眼花缭乱,找不到界面的重点信息,尽量将调色板限制在三种颜色以内,同时加强视觉层次和对比,避免影响用户思考和分心。 第四步 遵循品牌的颜色标准 创建调色板时,请始终遵循既定的品牌颜色标准,保证给用户带来一致的品牌体验。如果没有品牌色标准,可看看现有设计和产品中使用的颜色,并尝试融入到调色板中。 第五步 使用60-30-10规则 60-30-10规则指主色占总体面积的60%,辅助色占30%,强调色占10%,此比例有助于为界面创造平衡,同时还能防止视觉效果出现混乱。 第六步 应用然后迭代 使用60-30-10规则后,接下来我们通过调整色彩属性来提高美感,并对UI设计形成平衡和对比,有助创建正确的视觉层次结构,并突出设计中的重要内容。 第七步 保持颜色一致性 产品的色调影响了用户对产品的认知,用户对一个产品的认知来源于其品牌色和内容,因此颜色一致性在UI设计中非常重要,能增加用户对品牌的认知程度。 最后一步 测试设计效果 将调色板应用到UI设计后,需要进行一些可用性测试,如颜色在按钮、链接或其他类型组件上的易读性,以保证界面的易读性和可访问性问题。 虽然色彩搭配有很多基础知识和技巧需要我们掌握,但UI设计选择了合适的颜色搭配方案,不仅可以增强的认知度,还可以吸引用户的注意力,以及提高界面可用性。因此对新手而言,多多实践,很快就能充分利用好这些奇妙的颜色。

随着智能手机和平板计算机的日益普及,以及用户对移动端APP的使用日益剧增,使得APP广告的品牌营销效果已经远远强于传统PC广告。如今,越来越多品牌都试图利用APP广告收获更流量及利润,而要做到这点,就需要确保广告UI设计本身需具备良好的用户体验。 那么,如何设计APP广告的UI设计呢? APP广告UI设计,是受众与广告信息的互动交流载体,其包含视觉设计和互动设计两方面内容。也就是说,APP广告UI广告设计不仅需要关注广告的视觉外观设计,更要考虑人际交互、操作逻辑等用户体验,因此APP广告UI设计需考虑一下原则: UI设计原则一:便于用户控制 UI设计的本质不仅要做出产品好看的外观,更多时候还需考虑与用户之间的互动。因此APP广告UI设计要以用户为中心,站在用户的角度考虑问题,按照用户的思考和操作习惯进行UI设计,这样才能吸引用户和留住用户。 UI设计原则二:减少用户思考和记忆 APP广告若想要留住用户,就要尽量减少用户思考和记忆,确保UI设计符合用户的操作习惯。首先,广告文案要有创意,更要保证便于用户理解;其次,图形要很好地阐释文案,避免造成信息干扰;信息之间要建立相应的关联性,逻辑合理的信息分类,能便于用户快速浏览和完成任务。 UI设计原则三:保持界面的调性一致 APP广告UI设计要做到整体调性一致,就必须要注意一下亮点: ☉ 同一广告不同界面之间的内容要有差别,但整体界面结构和风格要保持一致; ☉ 同一广告的单页界面内,不同元素(包括字体、图形、色彩以及布局等)都要符合广告主题,确保广告的整体调性保持一致。 除了遵循上述原则,在实际的APP广告UI设计中,还可以采纳以下设计方法使界面更加新颖有效。 UI设计方法①:内容简洁,诉求明确 作为植入广告,APP广告UI设计的空间幅度通常都比较小,避免干扰用户正常浏览,因此要想APP广告能瞬间抓住用户的注意力,UI设计就需要做到整体内容简介,避免出现颜色堆积、字体过多和布局杂乱等不利用户体验的设计;诉求明确,方便用户能在最短时间内理解信息。 UI设计方法②:引导清晰,易于操作 刚才我们说到,APP广告作为植入广告,自然会打断用户正常的浏览。所以,APP广告必须在最短时间吸引用户,同时透过菜单、导航、按钮等有效元素引导用户进行下步操作,并及时反馈信息告知用户当前的进程和情况。 UI设计方法③:信息连贯,风格一致 虽然APP广告在不同尺寸和类型上的展现都会让用户产生不同的视觉感受,但无论运用哪种展现方式,APP广告在基于保持信息的连贯性下,根据移动端的界面的空间大小对信息内容进行增减;在视觉风格上,界面的基本视觉元素如Logo、字体、色彩等都应该保持一致,减少混乱。 UI设计方法④:先予后取,吸引参与 一般而言,在移动环境中,用户刚开始对APP的投入程度很低,除非能获得使用价值,否则不会频繁使用。APP广告吸引用户参与,必须让用户对APP广告及其品牌拥有好的第一印象,并渐渐让他们与APP互动过程乐在其中,然后再向他们提出相关要求。 总的来说,APP广告相较于传统PC广告,其最大优势在于用户可通过操控设备,实现与信息的互动交流。因此APP广告UI设计必须重视良好的用户体验,让用户易于操作和乐于操作,,并在互动体验中增强对品牌的认同感。

网站设计明明很漂亮,为什么没有人愿意停下来欣赏?答案很简单,因为你的目标客户并不认为你的网站做得“好”,也就是说你的网站并没有围绕“用户”来设计,丧失了网站设计中最重要的因素——用户体验。 网站用户体验该怎样优化?如果你尝试在搜索引擎中输入相关的字眼,会发现最终的搜索结果都会牵涉到UX/UI设计。下面,小编将简单说说UX设计和UI设计的区别,以及它们是怎样影响网站跳出率的。 ✪ 什么是UX设计? UX,全称为User Experience,也就是我们经常说的“用户体验”。知道UX是什么意思后,那么UX设计就很好理解,即围绕用户对网站进行设计,如网站栏目规划、内容放置位置等,注重于网站整体操作的流畅感,以及用户使用网站时的感受。 UX设计的覆盖范围广泛,会依据不同需求、预算、流程,分析和调整网站设计流程中的细节问题。如果你还未架设网站,也可以依据以下流程考虑网站的UX设计: ① 深入了解用户需求 UX设计既然是围绕用户对网站进行设计,那么在开始设计之前,我们就需要从目标受众的特性、产业分析,以及过往案例等,试着了解用户的需求,并考虑解决他们需求的方法。 ② 分析竞争对手优劣势 接下来,我们分析竞争对手网站的UX设计,了解他们这样设计的目的和可参考与改善的部分,分析自身品牌优劣势,并确定网站与他人不同的特色与定位。 ③ 针对既有或潜在客户做调查 找出既有或潜在客户浏览网站的偏好,弄清楚他们既定的思维和习惯,确保网站的UX设计可以贴合用户使用习惯,同时在接下来的流程中不会偏离用户需求。 ④ 绘制用户浏览体验历程图 藉由用户浏览体验历程图,可以了解用户与网站互动的每个细节和使用情景,目的是网站制作过程中与事后讨论,可以将问题症结点抓去来解决。 ⑤ 组成信息结构 信息结构是网站与用户之间的桥梁。从信息结构中,我们可以知道要制作多少页面及其可能涵盖的功能,并运用线框图将所有页面的配置画出来。 ⑥ 加工成原型设计 用线框图模拟真正的网站,将每个页面做成可互动的原型设计,把页面与页面之间的链接表示出来。通常UX设计做到这步,网站架构模型就基本成型。 ⑦ 可行性测试 利用原型设计进行测试,可以邀请用户或同事尝试使用网站,看看网站UX设计是否出现问题,然后再进行针对这些问题进行细部调整。网站没有太大问题后,便可进行UI设计。 ✪ 什么是UI设计? UI(User Interface)设计,也就是界面设计,即指网站的外观,包括页面整体文字大小、网站色彩搭配、网站按钮设计、Loading画面设计等等。UI设计除了要兼顾网站的美感外,最重要是估计用户浏览网站时的便利性。 在进行UI设计之前,我们应该先确定好品牌风格指南,一来有助于我们更好地掌握品牌的调性,在设计过程中避免界面观感与品牌风格、主题出现偏离情况;同时也可在展现品牌特色,同时保持网站一致性。 之后,我们就可以指南为设计标准,“随心所欲”地设计出满意的作品。 ✪ 完成UX/UI设计后,还需要做什么? 当UI设计完成后,接下来我们就要进行“无休止”的可行性测试,持续从用户中获取反馈,了解网站操作流程与用户界面是否贴合用户的需求,并重复以下流程不断调整网站的UX/UI设计: ① 重复测试和评估 运用QA或A/B测试,了解网站的可用程度,同时挖掘UX/UI设计过程没有发现到盲点,并进行问题排除和调整,定义出最佳的UX/UI设计版本。 ② 界面改进和新功能更新 UI设计的元件更新换代速度非常快,因此我们需要时刻关注UI设计的趋势,了解使用者需要哪些新功能并将其置入于网站中。 ③ 重新设计 网站的设计并非一成不变,因此如果大环境导致网站已不适应如今的市场,那么网站就需要按照上述流程,重新研究UX设计,建立新的使用者里程图和线框图,并进行UI设计。 ✪ 到底UX设计和UI设计有什么区别? 总体而言,UX设计是有一系列的规划所组成,而UI设计是UX设计中的一部分。尽管如此,UX设计和UI设计还有又不少不同之处,如: ① 意义不同 UX设计负责便是与解决用户体验的各种疑难杂症。 UI设计则薄板所有元件与元件设计的构想。 ② 作用不同…

很多设计师在进行UI设计没有灵感的时候,都会从其他设计师的作品中获取灵感,这是最佳的UI设计案例研究,既可套用常用的设计模式,也符合主流的设计规范,而且使用用户熟知的UI组件,能让界面变得更加易用。 But,经常借鉴别人的作品,会完全扼杀了创造,导致产品同质化严重;而且习惯于复用那些常见的UI组件,容易使自己陷入一个误区,忘了质疑这个UI组件是否适合自己的产品。 哪些UI组件应该谨慎使用? ● “深藏不露”的汉堡导航 对设计师而言,汉堡导航设计特别省事,只需要将所有菜单项排个序,然后放进可滚动的浮层中,并藏匿于汉堡菜单内即可,根本不用担心屏幕大小的问题。 但在实际应用中,可视化菜单项比汉堡菜单更能提高用户的参与度、满意度,甚至是商业利益,因此在近年流行的主流APP设计中,汉堡菜单已逐渐被底部导航的可见菜单设计取代。 不过,如果导航菜单项过于复杂,非要采用汉堡导航设计,一定要注意信息的优先级问题,同时将重要的菜单项可视化。 ● “遍地开花”的icon设计 过去由于手机屏幕空间有限,于是很多设计师都会使用icon代替文字来节省界面空间。icon虽然占用空间少,但要知道并不是所有用户都知道这些抽象化icon所表达的含义,他们极有可能需要花费多余的时间去探索并学习这些icon的功能,这是一个常见的UI设计错误,同时也严重伤害了产品的用户体验。 当然,这并不意味不能使用图标,因为在某种情况下,icon可提高菜单的可发现性,在界面中形成一个合适的触摸区域,并且能增加APP的个性。 因此,对于那些已经形成普遍用户认知icon,如搜索、视频播放、邮件、设置等代表常规功能的icon,可根据实际情况单独应用;而对于复杂功能的icon,应配以合适的文字说明。 ● 基于手势的菜单 自2007年苹果推出iPhone时,多点触控技术逐渐成为主流UI设计技术,同时也让用户逐步认知到触屏操作并非只有“点击”,还可以缩放、滑动等。 尽管手势在UI设计中深受青睐,有时也可以帮助设计师节省屏幕空间,但手势并不是显而易见的功能,而且大部分手势都没有标准的定义。有些用户熟知的手势操作,如点击、缩放和滚动,在不同的APP中可能会有不同的功能,这就需要用户自己去发现并学习。 ● 一打开APP就是引导 引导页是指用户第一次启动APP或APP更新后,用于让他们快速了解产品的某个功能/流程的页面。一般只出现一次,关闭后再次打开APP是不会再看到的,除非某些APP的设置功能中有新用户介绍入口。 为什么说引导页需谨慎设计呢?因为很多用户下载或更新APP后都会直接跳过这种介绍,而马上开始使用APP。即使他们注意到引导页的内容,也会很快在关掉APP后忘得一干二净(尤其是界面充斥着满满的信息)。另外,在界面中加入引导并不一定能让用户更容易上手。用户界面就像讲笑话,但如果需要去解释笑点,那就…… 事实上要设计引导页面并不难,比如在引导页中给用户创造情景,简单地介绍自己,并将重点聚焦在给用户带来的好处上,而不是介绍界面功能;又或者是增加和用户的互动,使用步骤化的引导,不仅能更好地传递产品的品牌理念,同时还能给用户营造更的操作体验。 ● 创意十足但作用不大的空白页 有时设计师看到错误信息或空白状态是个空的画布时,会认为这是做创意的绝好机会,然而却忽略它们在整体用户体验中扮演着重要的角色,也就是说大多设计师在设计空白页时都忽略它的实用性。 空白页设计与web上的404页面一样,不仅是视觉设计和品牌表现,更改是可用性的表现。在考虑创意的同时,我们更应该在空白页中告知用户出现空白页的原因及解决方法,以便帮助用户去解决问题而非制造问题。 其实除了上述几种UI组件,还有很多组件都应该谨慎使用,谨慎设计。有创意的设计是好的,能提高界面可用性的设计也是好的,但是如果在不恰当的情景中出现,再有创意、再有用的设计对用户而言都只不过是“食之无味弃之可惜”的鸡肋组件。

如何设计好搜索框?“搜索框”是UI设计中非常重要且必要的功能模块。好用的搜索框能为用户提供一条便捷检索内容的绿色通道,从而提高产品的用户体验。市面上大多产品的搜索框存在很多相似性,但要想将搜索框的效用发挥出来,就需要在细节上为用户带来差异化的反馈,营造出暖而贴心的氛围。 搜索框的类型有哪些? 虽然市面上大多UI设计的搜索框,从样式上看差别并不大,但其实每个搜索框的细节都是经过精心设计的,而且用途也各不一样。 ① 搜索图标:页面上只提供放大镜图标,用户需要点击图标后才能跳转到搜索页面。 ② 基本搜索框:主要由放大镜图标、文字提示、输入框三部分组成。 ③ 文字提示类搜索框:样式上大致与基本搜索框相同,唯一不同在于这类搜索框中的文字提示部分不再是“搜索”二字,而是根据产品需求支持预置多组文字提示并在搜索框内循环提示。 ④ 功能类搜索框:在文字提示类搜索框的基础上,根据产品功能额外添加常用功能性图标,以赋予搜索框更多功能属性。 如何设计好搜索框? 由于搜索框主要由输入区域和提交按钮组成,对此部分设计师会认为搜索框无需花心思设计。但正是搜索框是UI设计中经常会用到的设计元素,因此设计好搜索框对产品的重要性不言而喻。 UI设计技巧一:视觉上突出搜索框 如果“搜索”是产品中非常重要的功能,那么搜索框就应该被放在最醒目位置,以便用户能快速查找到想要的内容。 如果用户需要点击icon或按钮,才能激活隐藏的搜索框,这可能会: 1. icon和按钮所占用的空间较小,导致用户容易忽视产品的搜索功能。 2. 增加用户的交互成本,因为用户在使用搜索框前需要增加一步操作。 UI设计技巧二:搜索框与放大镜icon搭配使用 icon数量千千万,能被大众一眼便可识别的icon却少之又少,而放大镜icon就是其中之一,甚至无需多余的文案标签,用户就能轻松识别放大镜代表的是“搜索”。 尽量使用最简单的放大镜icon,因为视觉细节越小,越能减轻用户的认知负担,从而提高认知效率。 UI设计技巧三:将搜索框放在用户预期位置 搜索框放在界面中什么位置最合适?其实这并没有一个准确的说法,不过根据F型视觉浏览原则,将搜索框放在页面中的左上角或右上角,能让用户很容易就会找到搜索框。但如果搜索框并不在用户预期内的位置,这意味用户需要付出额外的成本才能找到搜索框。 另外,你也可以使用眼动热力图或其他眼部追踪工具研究用户浏览行为,找到用户关注的页面区域,这样你就能知道搜索框该放在哪里比较合适。 UI设计技巧四:提供搜索按钮 虽然点击键盘的回车键可触发搜索,但部分用户仍喜欢搜索传统的“搜索提交”按钮。因此,设计时尽可能为用户保留回车键和按钮两种触发搜索的形式,同时确保“搜索提交”按钮的大小合适,让用户在使用鼠标或手指进行点击时不需要特别精准地操作。 UI设计技巧五:告诉他们可以搜索哪些内容 如果用户可搜索的内容种类很多,那么搜索输入提示就显得比较重要,因为它能告诉用户可以搜索哪类内容,减少用户出现错误的几率。但搜索输入提示一定要限制字数,否则会增加用户的认知负担。 UI设计技巧六:搜索框尺寸要合适 搜索框过小,即使用户能输入很长的搜索文案,但也会导致仅有部分文案可视,让用户不能很好地审视或编辑搜索文案。另外,搜索框设计过于短小,用户会因为长文案的可读性较差,而倾向输入简短或不准确的搜索文案。 因此输入框尺寸,最好能根据用户预期的输入文案来进行定义,从而保证它的可读性和展示性体验。一般来说,搜索框的展示字数最好控制在27个字母左右。 UI设计技巧七:使用智能推荐/匹配机制 智能匹配可节省用户的输入成本,提高用户输入速度,同时还能帮助用户组织搜索语言。普通用户大多不善于组织搜索语言,这种情况下如果用户没有表达清楚,很难成功找到合适的搜索结果。因此,为用户提供智能匹配功能,能帮助用户表达清楚搜索问题。 设置智能匹配功能时,需注意以下几点: 1. 确保智能匹配符合可用性原则,避免对用户造成干扰或困惑。 2. 智能匹配的推荐项目不要超过10个以上,以免信息过载。 3. 允许用户使用键盘对匹配列表的内容进行导航操作(主要针对PC端)。当用户下滑到最后一个项目时,若想回到匹配列表顶部,应允许用户使用Esc键进行操作。 4. 强化用户输入的文案信息与智能匹配文案信息的不同之处。 5. 除文案描述,还可通过增加列表项内容的缩略图,提升搜索内容的感知。 好的搜索功能是搭建重内容的UI设计中至关重要的部分,无论是搜索框的尺寸大小,亦或是搜索框内所展示的搜索字词引导,都会影响搜索功能的可用性,进而影响整个产品的体验。

很多设计师总会将“出彩设计”与“复杂技巧”划上等号,但纵观中外不少优秀的UI设计作品,大多都是以经典设计或常见布局的基础上稍作调整,打破某一规则,从而给观众留下深刻印象。 如何设计出与别不同的UI设计作品? UI设计技巧一:错落有致的排版布局 大多时候想要UI布局显得逻辑清晰、易于理解,我们需要将界面中的图片、文字、按钮等,遵循“亲密性原则”排版。 在保证元素间的视觉关系,同时让排版稍微错落,或加入不规则的交互元素,会让整体界面显得更加活泼有趣,又不会让人觉得太过挑落。 打破常规虽然是经常用到的一种UI设计思路,但要注意只能打破一种常规,一旦更多的规则和习惯被打破,会影响网站整体的易用性,给用户造成混乱。 UI设计技巧二:极具表现力的单色配色 相比起多色调配色方案,单色配色会让UI设计作品更加简单直观,更重要是能够突出排版。 不过绝大多数设计师都不会将单色配色作为首选配色方向,皆因单色网站太单调。正是这一原因,单色配色方案在很多UI设计项目中相对特别,不仅容易脱颖而出,更能呈现出极具表现力的一面。 在单色网站中加入全彩清晰图片,或置入装饰性元素,不仅能更好地强化页面排版的形式感,还非常明显地吸引用户的注意力。但前提是,你的设计目标要凸显这些图片内容,同时避免装饰性元素分散用户的注意力。 UI设计技巧三:全屏大图兼顾功能线性元素 高清大图盛满全屏,再加入展示性强的字体作为标题,会更容易让用户的注意力集中在标题上,但在大多时候这种简单的设计会让人感觉非常单调。 适当添加线性元素,具备引导用户视线,强化用户交互之作用,同时还不会遮盖作为视觉主题的图片。 虽然使用占据整屏的高清大图会让人赏心悦目,但将图片超出边界或更多图片在边界露个头,能更好地吸引用户好奇心,也比单纯的左右翻页按钮更能促进交互。这种不对称的布局结合形式感极强的标题和数字元素,整个界面显得更加优雅特别。 UI设计技巧四:明确视觉焦点 视觉焦点,即能让我们视线多停留几秒的视觉元素。如果界面缺乏视觉焦点,即使整体设计得再好看,都会让人觉得画面好像缺少什么。 统一色彩会让整个页面显得非常集中,而所有视觉元素都围绕着聚焦元素来设计,会将用户的视线引导到聚焦元素上。 很多创意类的设计往往都会反差比例的手法,从而很好的吸引了受众的注意,达到塑造视觉焦点的目的。 如果界面布局略显呆板单调,运用破图方式塑造了视觉焦点,使画面具备趣味,同时能改变画面的静态性,赋予了其动感。 UI设计技巧五:黑白灰搭配明快提亮色 色彩通常是最快抓人眼球的设计元素,但黑白灰这类中性色,能使画面回归极简本质,诠释极致个性的风采,让人爱不释手。 界面中大面积仅适用黑白灰,虽然能很好地体现高级感,同时也营造了一种沉静的氛围。使用明亮色彩作为点缀色,能打破这种氛围使界面增加一个层次。 如果用明亮色彩承载界面的核心信息,能让用户更快搞清主次。 想要让网站更加与众不同,打破常规往往是一条非常好的“捷径”,只要在经典的设计布局中神来一笔,便能给人留下深刻印象。但同时打破常规也是一条不好走的“捷径”,如果没有把握“度”的问题,会破坏网站的易用性,增加用户的学习成本,那意味着这个网站是“废”的。

产品推广页UI设计,看上去很简单,只要放个Logo,配些大图,放点文案,再加个按钮,就OK啦!但各位有没有发现,这样的产品推广页UI设计不仅无法获得理想的转化功能,甚至有些产品推广页更是为了尽可能劝服用户消费,硬生生地设计成一个“广告牌”。 什么是产品推广页? 产品推广页,又叫推广落地页,是指用户打开你的链接后访问的一个页面。这个页面可以是首页、可以是集合页,也可以某产品的广告页面等。无论产品推广页是哪类页面,其主要目的都是达到宣传或销售的效果。 因此,在设计产品推广页时,一定时刻牢记它的目的和作用。产品推广页UI设计既要有创意,能加深用户对它的记忆;更要重视它的易用性,确保页面信息直接了当,整体视觉风格要符合产品的特征,保证能吸引目标用户进行下步操作,并提供愉快简单的操作体验。 设计产品推广页时需要注意什么? 互联网上很多网站的产品推广页虽然看起来非常好看,却不能发挥它应有的作用,关键在于页面设计的可用性无法满足用户想要的体验。因此,设计产品推广页时需注意以下几点: UI设计注意事项一:别盲目跟风 每当Apple出新的设计风格时,都会成为当年的流行指标,不少公司都争先恐后地模仿Apple风,深怕慢了一步会给用户“淘汰”的感觉。但是这么多年,又有多少家公司是因为跟随设计趋势而大卖?显然寥寥无几,因为在用户心中,页面设计并不是决定他们消费的重要因素。 ▲ 阿里巴巴社招网站页面设计是自家办公大楼 ▲ 阿里巴巴校招网站页面设计则是使用插画设计。 ● 两者目标用户群定位不同,网站风格也各不想。 追随设计趋势,似乎成为整个行业都会做的事情,也是企业网站一开始就会误踩的陷阱,“只追求美观而忽略实用”。因此,在设计产品推广页的时候,考虑不是UI设计是否追随当前流行趋势,而是考虑这种流行趋势是否符合产品定位和目标用户心理,如果不符合,那就没必要使用。 UI设计注意事项二:文字别太多 无论你的产品有多出色,亦或是你多想向全世界介绍你的产品,都应该记住:“没有人是喜欢长篇大论的”。 尽可能使用简单而有力的句子描述产品的卖点,如果内容实在太长可分成多个部分,同时文字应伴随图片或可视化数据,以最快速度抓住用户的注意和兴趣。要记住,用户在浏览网页的过程中可能会上下滚动浏览页面,但不会仔细阅读界面中的所有文字,除非是他处于某种目的,否则他很有可能会因为界面文字太多而选择离开页面。 UI设计注意事项三:按钮别太多 按钮一定要遵循“少即是多”的原则。因为用户并不会因为你的几面出现多个按钮,而增加点击的想法;其次,按钮太多,反而会增加用户的需求成本,而让他们感到厌烦,甚至离开网站。 设计按钮时,可尝试参考以下四个策略: ◆ 删除:去掉所有不必要的按钮,直到不能删减为止; ◆ 组织:按照有意义的标准将按钮分成组; ◆ 隐藏:只在可见界面上保留最基本的按钮,把不重要的按钮隐藏起来,避免分散用户的注意力; ◆ 固定:将常用且重要的按钮固定在界面的顶部菜单栏或底部菜单栏,甚至在用户尝试滚动页面时才出现,以便用户轻易找到想要的按钮。 UI设计注意事项四:导航不要太复杂 导航是提高界面可用性的其中一种设计。导航设计不佳,会增加用户对网站操作体验的理解难度,降低用户对产品的可信度,继而导致使用网站的用户愈来愈少。可见,导航对UX设计其中至关重要的作用。 由于导航决定了界面UX设计的成败,因此设计界面导航时,尽可能创建并保持清晰的标签和路径;根据SEO优化要求和用户搜索习惯,设计有意义而非格式化的标签;尽量不要使用下拉标签这对SEO优化不友好,并鼓励用户跳过重要页面;导航设计要与用户目标保持一致。 UI设计注意事项五:做任何用户测试 如果没有做任何用户测试,就无法确定产品推广页是否达到理想效果或哪里出现问题需要需改修改。除非这个页面本身毫无意义,但对大多数公司而言,没必要浪费时间和精力去做一个没什么作用的页面设计。 用户测试成本不高,有时可能只要20%的额外研发时间,就能为产品推广页增加50%以上的转化率;有时亦可能更改按钮或标签的颜色,也可以达到提升转化率的作用。 产品推广页不是一味只追求美观性或追随流行趋势就可以,更重要是要起到向用户推广或引导用户进行下步操作的作用。如果你的产品推广页上线已有一段时间或正准备上线,不妨从以上五点入手,看看误踩陷阱!

MENU
網頁設計公司