Blog

上期,小编分享了“盘点那些容易被忽略的APP设计细节之视觉篇”,本期将继续延伸“容易被忽略的APP设计”的内容,和大家来说说关于信息表达型问题。 传送门:盘点那些容易被忽略的APP设计细节之视觉篇 在UI设计中,信息的处理过程可分为三个阶段,分别是感知信息、解释信息和整合信息。设计师会根据用户的视觉心理习惯对界面进行设计,选择合适的视觉表达信息,规划视觉信息结构,以帮助用户更好地阅读和理解信息。 盘点那些容易被忽略的APP设计细节之信息表达型问题 ① 明确表达图标的含义 虽然去掉图标文案后,会让界面显得更简约整齐,但是如果你不能保证用户能看懂图标所表达的含义时,最好还是使用辅助说明文案,确保图标的信息能准确地传递给用户。当然,如果图标本身带有很强的信息传达能力,能确保用户能正确识别,那就另当别论。 ② 正确表达按钮属性 通过按钮颜色、大小、风格等引导用户进行操作,需要强化的就要做得足够突出,不要让整个界面都处于主次不明的状态,分散用户的注意力,削弱界面需要传达的信息。另外,按钮设计必须清晰准确地传达当前状态,千万别为了视觉效果而给用户带来错误的判断。 ③ 正确处理文字排版的层级关系 进行文字排版时,正确处理信息间的层级关系,将提高用户对信息的识别度,以及界面的易用性。因此,我们通常会透过字体大小、颜色、留白,以及层级分割等技巧处理,将相同属性的信息归类设计,并通过留白的不同达到层级的区分,让整个信息排列主次分明、层级清晰。 ④ 线条与色块分割的合理运用 在分割界面信息时,要根据信息间的关系选择合适分割形式,比如线条通常用与分割同一类或相同属性的元素;色块则是用于分割不同类别或区分不同属性的元素,以达到界面层级清晰、归类明确的目的,不可为了视觉效果而盲目穿插运用。 ⑤ 提前预估信息呈现的最大化 进行界面布局时,需要明确信息呈现的最大值,而不是取最小值进行设计。虽然过于理想的长度范围或许让界面样式变得更加美观,但落地后可能会给用户带来非常糟糕的体验。 ⑥ 运用提示符提高用户阅读效率 在大篇幅的文字信息布局中,合理使用提示符能提高用户对信息的理解,以及快速找到所需的信息。一般来说,提示符是不限元素表达的(数字、字母、图形、色块等均可),只要能有效区分信息层级即可。 ⑦ 布局层次分明,重点突出 合理的界面布局是为了更好地引导用户阅读和操作,因此界面排版布局时绝非随意将信息罗列,而是要根据信息的侧重点进行排列。比如,利用卡片模式的大小变化区分信息,可以很好地引导用户视线,大大提高用户对界面的理解以及操作效率。 ⑧ 信息布局符合阅读习惯 大部分用户的阅读习惯都是从左到右、从上到下的,如果你要打破这个习惯进行视觉表现,将严重影响产品的用户体验,让用户产生放弃使用产品的念头。 信息传达是APP设计中非常重要的部分,它将影响整个界面的易用性和可用性问题,以及用户理解产品主旨的关键所在,所以做好信息传达,才能避免出现点击率高而转换率低的情况。 * 最后一堂课,小编将会整理关于APP设计中的概念表达问题,有兴趣的朋友不妨多多关注!

如今使用手机上网的人愈来愈多,甚至连搜索引擎都是以移动优先,使得APP设计也越来越受到公司的重视。那么,APP设计中有哪些细节是容易被忽略的?下面,让我们一起看看有哪些特别容易被忽略的APP设计细节,看看各位平时有没有重视! 盘点那些容易被忽略的APP设计细节之视觉篇 ① 统一的图标设计风格 图标设计风格多样,常见的有线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等,但无论在设计APP时选择何种图标表现形式,相同模块中的图标必须采用统一种风格,以保持界面的统一性。如果是线性图标,也需要保持一致的描边数值。 配色方面,相同模块中的图标应尽量采用相同的颜色;否则,避免使用饱和度以及明度反差过大的配色方案,影响整体的视觉协调。 ② 图标大小的视觉平衡 由于各个图标的体量不同,加上相同尺寸下不同体量的图标,其视觉平衡也不同(比如相同尺寸的正方形会比圆形显得大),因此为了保持整体视觉平衡,我们需要根据图标的体量对其大小做出相应的调整,而非执着于所有图标都采用相同尺寸。 ③ 优化分割线 由于分割线的作用是区分上下信息层级和界面装饰,因此我们需要尽量保证分割线的配色表现力低于文字信息,避免分散用户的注意力。最典型的案例就是,在浅色背景上,我们往往会选择浅色分割线,使界面更加简洁通透。 ④ 合理运用投影颜色与透明度 投影的运用应符合页面设计的氛围,其目的是为了增强元素的立体感与层次感,而不是影响整个页面的视觉平衡。 因此,制作投影时不能单纯用黑色和灰色,而是需要根据不同背景改变投影颜色和透明度。一般来说,浅色背景下的投影颜色透明度设置在10%~40%之间;而深色背景下的投影颜色透明度则建议设置在20%~40%之间, ⑤ 不要过度装饰,让界面更简洁 设计需要准确把握“度”,过度的设计只会干扰界面的信息传达;相反,减少不必要的设计元素,可以突出界面重要信息,并让整个界面变得更加简洁清爽,不会分散用户注意力。 ⑥ 图片比例&视平线的统一性 在人物展示设计中,若并列出现多个人物形象,为保持视觉平衡,需要调整并列图片的大小比例,像所有角色都在相同焦距下拍摄。另外,在人物上下位置的调整上,我们要尽量控制视频线的方向,让他们的眼睛处于相同位置。 ⑦ 控制好界面中的配色数量 通常,界面配色方案控制在3种颜色以下,相对比较容易把控。若超过3种以上的配色,就会非常考验设计师的功底,把控不当甚至会让整个界面非常凌乱。 另外,选择配色组合时,新手建议使用同色系或邻近色搭配,使整个界面色彩更加协调和交融;想更鲜明地突出某些元素,采用对比色是不错的选择。不过,无论选择哪种配色方案,都需要控制好界面中的配色比重,保证信息传达不受干扰。 ⑧ 合理地进行设计对比 鲜明的对比效果,能给界面带来丰富的视觉层次和强烈的视觉冲击力。除此之外,使用对比手法,还具备强调重要元素、增强界面的可读性,以及为界面视觉效果添加趣味性等作用。比如,很多设计师都喜欢使用不同颜色来区分不同信息模块,以提升整个界面的节奏感。 ⑨ 提高配图质量 图片质量影响整个界面的格调。现在很多企业为了提升在消费者心中的印象,都会对图片进行美化后再展现给用户。因此,在选用网站图片时,除了尽量考虑高清图片外,还需要通过后期裁剪、曲线调整、色彩调整等技巧,使图片的视觉效果更加协调。 最后,我想说…… 视觉设计是APP的重要组成部分,它不仅影响用户对APP的第一印象,甚至被认为是对APP最重要的印象。可见,重视APP视觉设计的细节是多么重要! 当然,有关APP设计的细节,并不只在视觉效果上,信息传达和概念表达同样有不少细节是需要我们重视的。欲知后事如何,请待下回分解!

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

人都是群居动物,哪怕你有社恐(社交恐惧症),但日常生活中同样离不开与其他人的交往。网络技术的高速发展,让我们远离了在现实生活的畏手畏脚,而对社交网络越来越依赖,而社交网络又如“见缝插针”地贯穿我们的生活。 本文将分享由腾讯(Tencent)整理的“2021-2022年社交类APP设计趋势报告”,让大家回顾近年技术创新和用户代际更迭是如何导致用户需求差异化的,并探索社交类APP设计的趋势将如何发展,以帮助各位能应对变幻莫测的互联网大环境。 ◎ 互联网社交发展方向 这部分主要是受网络技术发展和现阶段人口结构变化影响: 1. 网络技术发展对网络社交的影响 1G时代,即第一代移动通讯系统,只支持语音呼叫,采用的模拟通信系统,容易出现语音质量差、安全性差,容易串号、掉线等情况。 2G时代,是最早的文字简讯时代,除了支持语音呼叫,还可以发短信、发彩信、发图片,并可通过QQ、飞信等社交软件实现跨地域聊天。与1G的模拟信号相比,2G的数字信号让移动通讯更加稳定、安全、高速、高效。 3G时代,拥有更高且更稳定的数据传输速率,支持影像电话和大量数据信息的传输。这意味着3G时代正式进入移动社交时代,用户可以基于位置或行为进行交友,也可以随时随地与朋友联系,以及随时通过社交媒体平台获取好友线下生活状态。 4G时代,具备速度更快、通信灵活、智能性高、高质量通信、费用便宜等特点。不仅让用户从文字、图片的聊天习惯逐渐往实时语音和实时视频变化;还大大提升社交网络的拼配效率,高效建立潜在社交关系。 5G时代,迎来万物互联时代。视频成为主要信息和沟通载体,让在线沟通和协作变得更方面。线下社交场景逐渐转移到线上,线上社交频率大幅增加的同时,副作用也开始出现,社交隔离让人们感到更孤独,对云社交的需求愈发强烈。 2. 现阶段人口结构变化对网络社交的影响 初代独生子女群体集中于80后,但由于父母辈基本拥有较多的亲兄弟姐妹,因此这代独生子女也会用不少的同辈表(堂)兄弟姐妹互为玩伴。而由初代独生子女繁衍出的二代独生子女(大部分为现在的00后),由于家庭关系链越来越短,加上人口流动频繁,因此他们少有同辈亲属,关系也较为疏远。 根据腾讯2018年发布的《00后来袭-腾讯00后研究报告》中提及到“75%的00后渴求有更多时间跟同伴一起”。 除了同辈亲属少,00后在现实生活中的同辈社交圈子也相对狭窄。因此他们会通过互联网与同辈圈互动,建立朋友关系,从中获得陪伴感、归属感和自我认同,形成自我认知。 回顾近几年的网络社交变化:受网络技术影响,网络社交体现从“线上线下割裂”逐步发展为“虚拟空间映射真实世界”发展;同时,00后由于社交圈子狭窄,对线上社交需求会更为强烈。 ◎ 社交APP设计趋势和特点 了解互联网社交发展趋势后,接下来小编将从自我展示、匹配连接、沟通互动这三方面,探讨社交APP设计趋势和特点。 一、 更多样化具象化的自我展示 1. 自我展示方式从单一趋向于全面 过去用户若在互联网上介绍自己,往往需要填写大量文字信息和传输多张精修照片,导致编辑成本高、浏览效率低。 如今视频化的普及,用户可以随时随地记录自己,让个人信息传达变的更有效和真实。 2. 从看脸社交到声音社交,沟通更有温度 传统陌生人社交产品更多是看“颜值”,而像Soul、吱呀这类新的陌生人社交产品,试图避开“颜值”这个层次。 事实上,看脸的陌生人社交目的简单直接,导致平台氛围非常浮躁,需要一些泛娱乐功能将用户留存。相比之下,声音沟通起来更有温度,彼此也不会有太多心理负担。通过声聊产生感觉后再进行进一步沟通,也比较符合国人偏于内秀的特点。 3. 从“我是谁”到“我们的关系” 随着硬件设备和图像技术的发展,用户慢慢丰富了社交资产。在网络社交展示自我时,用户不仅会站在展示者的角度思考“如何更好地展示自己的社交资产”,还会从看的人考虑“如何更了解他(好友)”,强化双方的情谊。 4. 虚拟和真实之间,越来越强调“真实” 虚拟形象概念并不新鲜,早于2003年QQ秀就是虚拟形象的雏形。在大数据和人工智能时代的今天,用AI技术打造的虚拟形象能随时与用户进行实时互动,满足用户对陪伴与娱乐的需求,在现实生活中的存在感也变得越来越强。 5. 社交人格从“完美人设”到“透明人设” 随着社交平台的好友列表数量增多,用户在互联网所经营的人设也越来越谨慎微小,甚至开始疲于“完美”人设的表达。社交产品开始“减压”,“透明人设”的流行正好反应了时下年轻人反对当今社交信息流充斥着的完美人设,以及鼓励自我展示更加真实和未经编辑。 二、 更懂我的匹配连接 1. 更高效的匹配连接 有调查发现,现实生活中两个互不相识的陌生人需要花上50小时才能在路上叫出对方名字,再投入40小时才能蜕变为真正的友情。 网络社交可以帮助用户缩短时间,降低认识成本,实现更高效的的匹配链接,以及更实时的交互和面对面的互动体验。 2. 匹配连接趋向多元化 《00后来袭-腾讯00后研究报告》中表明,73%的00后会主动获取资源发展自己的感兴趣的领域。 但在现实生活中00后同辈社交圈狭窄,难以找到志同道合的朋友,因此他们会倾向在互联网社交阵地上寻找垂直类兴趣伙伴。而线上社交需要不断垂直细分,才能方便用户快捷连接同兴趣的同辈伙伴。 3. 匹配提升安全感和隐私保护 现实生活中我们都会下意识保护自己隐私,但到了互联网世界却忘记“人心险恶”,轻易将自己信息分享给他人。为保障用户的信息不被泄露,社交平台不仅需要帮助用户建立社交关系,更要提升用户隐私保护和社交安全机制,让用户安心使用。 三、 更富有乐趣和临场的沟通互动…

色彩可以定义品牌基调,加强品牌形象的传递;也可以增强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设计则薄板所有元件与元件设计的构想。 ② 作用不同…

如何利用视觉艺术为网页设计增彩?随着网络技术的发展,互联网成为我们生活中不可缺少的“必需品”。我们可以借助互联网去探寻想要的知识或商品,而商家亦可借助互联网向消费者传递各种信息。因此,商家若想要利用网站吸引访客消费,那就需要让网站变得更加鲜活,从众多竞争对手中脱颖而出。 如何利用视觉艺术为网页设计增彩? 网页设计技巧一:巧妙利用文字 网页设计中,如果说颜色是影响访客对网站的第一印象,那么文字在整个界面中则是以主体而存在,是传达信息的主要元素。 巧用字体的大小、颜色、样式,以及间距等属性,能直接影响整体页面的视觉传达效果。 整个界面布局虽然非常简洁,但设计师使用文字跟图形做了巧妙的结合,使页面显得简单而不单调,同时文字设计采取强烈的大小对比效果,使页面变得更有层次感。 设计师将字体打散进行灵活艺术加工处理使其图形化,既不会影响信息的表达,又使整体看起来更加贴切设计主题,更具美感和艺术性。 页面信息量虽然有点大,但是设计师在文字间距和大小对比做了合理的处理,使整个页面看起来满而不乱,让用户很容易一眼就能找到想要的信息点。 网页设计技巧二:使用几何图形 互联网上大多网站都是采用栅格化设计,整个界面都是非常方正的表现方式,虽然这种设计手法不容易出错,但难免会让人觉得单调乏味。 适当运用一些几何图形加入其中,会让整个画面显得生动活泼,甚至可以起到打破常规的作用。 以logo的几何图形作为网站背景图案,使整体页面显得更具形象化。 Logo采用几何图形的表现方式,导航则巧妙地使用轮盘的表现形式,让原本信息量不大的界面看起来更加活泼和饱满。 设计师直接利用几何图形作为栏目块,在hover状态下直接呈现内容,使简单的画面瞬间丰富起来。 网页设计技巧三:合理利用留白 古人曾曰:虚实相生,无画出皆成妙境。网站设计巧妙使用留白,能让画面的视觉效果更加通透、流畅和干净;同时还能避免画面元素堆积显得拥挤,并减低辨识度。 当然,这里的“留白”并非只页面中的白色区域,而是没有其他元素干扰的视觉区域。 界面以人物为中心,大面积四周留白,从而突出中心内容区域。虽然页面的信息量并不大,但胜在简单明了,能直接表达出网站的内容主旨。 设计师将原本信息量很大的电子产品页面,通过精简内容和留白设计,突出产品的主要功能,同时也使页面显得更加简洁和品质感十足。 这是一个以图形化为中心的个人网站,由于界面信息量不多,设计师大胆采用大面积留白设计,并在留白的基础上以图形突出网站的主要特色和主旨,让整个页面显得通透活泼但又不失严谨。 网页设计技巧四:适当添加点缀色 所谓点缀,是指用小而精湛的手法,在原有事物上添加装饰,使它变得更加美好和迷人。同样道理,网页设计合理利用点缀色,能很好地起到画龙点睛的作用。 界面整体以暗色调为主,并利用较为亮眼的紫色突出界面的主要元素和信息,使原本沉闷的页面变得更加神秘且活泼。 朴实素雅的页面,添加了黄色和蓝色的几何元素作为点缀,丰富页面内容,同时也增加页面活力。 界面大面积使用黄色作为栏目的背景色,瞬间让人有种眼前一亮的感觉,同时也突出了栏目的内容。 以上四点都是比较基础且易用的网页设计技巧,当然想要让页面变得更加鲜活又何止这四种方法,像是插画元素、动效等都可以为网页设计增彩。如果你整在找一件值得信赖的网页制作公司,欢迎直接联络我们,我们将以优质的服务为提供适时的建议。

很多心理学研究表明,一个人形成对别人的第一印象,往往只需要几秒钟而已。具体多长时间,这主要是基于每个人对第一印象的标准和人群、场合等因素的差异。也就是说,当我们要做出主观判断并得出结论的时间,往往只需要半分钟左右。 将上述理论套用到APP设计中,我们可以好好把握这“黄金半分钟”,利用“新手指引”吸引新用户熟悉界面,帮助他们明确了解APP的用途,激励他们使用,从而提高参与度和留存率。 新手指引的形式有哪些? 形式一:蒙层引导 特点:降低页面中其他元素的干扰,让用户聚焦了解被圈注的功能或手势说明。另外,蒙层引导可细分为单页蒙层引导和分步引导两种。 形式二:气泡提示引导 特点:设计轻量但目的指向性极强,对用户的干扰也非常小。常出现于以下场景:告知用户有新功能上线、引导用户使用核心功能、或告知用户一些隐藏菜单的内容等。 形式三:动画/视频引导 特点:用户可根据动态演示,快速理解整个产品,但这类引导方式所传递的信息量不能太大,否则会导致用户失去耐心或干脆什么也没记住。适合于操作比较复杂或动态演示比较有冲击力的产品。 形式四:教学式引导 特点:结合产品实际使用场景,逐步引导用户进行操作,让他们沉浸其中、快速学习,并且因为有及时的操作反馈,用户很容易就能获得强烈的成就感。多见于工具类产品和游戏类APP。 形式五:引导页 特点:通常有3-5个页面组成,在用户使用产品前,预先给用户营造好产品的基调和氛围,宣传产品功能和亮点,以及突出产品最核心的操作方式。值得注意是,引导页面内容要保证能给用户带来新鲜感和吸引力,否则对用户来说反而是种干扰。 新手指引的设计要点有哪些? 新手引导的核心是“以实际价值传递为依归,打造良好的感知体验”。简单来说就是帮助用户更快地熟悉产品和提升用户的好感,从而提升用户的活跃度和留存率,乃至转换率。 为了达成这一目的,我们可以从以下几方面考虑“新手指引”的设计: 1. 文案精准,通俗易懂 文案字数过多,容易造成用户遗忘或出现记忆偏差。因此,新手引导中的文案要简短且突出重点,才能最短时间吸引用户的注意力,并让他们快速理解产品所表达的意思。 2. 明确显示进度 让用户实时知道当前进度,能避免因失去控制感而产生焦躁情绪。另外,当用户完成引导中的任务或操作时,给予及时的反馈或鼓励,会让用户获得被认可的满足,从而增加产品和用户之间情感联系。 3. 提升用户感知 如果用户一开始就要求被动接收很多信息,容易给用户带来认知负担,从而产生疲惫和烦躁感。因此,设计新手引导时,我们既要给用户提供适时和必要的帮助,同时保留用户主动探索的权利和积极性,让用户参与其中形成更强烈的感知体验,从而提升用户自身对信息消化和产品学习的速度。 4. 增加趣味性 如果有足够能力,可收集丰富的用户信息,在精准细分人、时、地和事后,通过可爱的动画形象,以及更个性化的语言引导用户,可以给用户带来更好的共鸣,同时给新手引导增加更多趣味性,降低用户对被干扰的反感,并在愉悦的心情下快速掌握引导内容。 5. 可跳过可忽略 并不是所有用户需要引导,也不是所有用户都愿意被引导。首先我们必须知道“新用户≠新手”,如果产品在无法判断新用户是否新手的情况下展示新手指引,会让很多非新手的新用户方案。因此给予用户选择的余地,允许引导被关闭,会使产品更具人性化。 总的来说,新手引导虽然是整个APP设计中一个很小的缓解,但它能直接影响用户的使用感受。因此设计新手引导最重要是考虑产品的本身,在合适的时机,以恰当的方式出现,才不会对用户造成骚扰,同时又能很好地引导用户使用。

什么样的背景最适合你的网站?这没有硬性规定,但确实也有一些要求是需要遵守的,例如: ◆ 网站背景内容应具有目的性; ◆ 背景主题与品牌风格一致; ◆ 背景上的文本元素应易于阅读,且背景主题与网站主题保持连贯一致; ◆ 背景应在短时间内加载完成,并且不会导致网站加载速度变得缓慢,甚至卡死。 合适的网站背景可为整个网站设计确定基调,更好地传递品牌情绪、增加消费者对品牌的认知度。下面,小编将为大家整理一些有关网站背景设计的小技巧,希望能帮助你在没有灵感的时候找到窍门。 【分享几条设计网站背景的小技巧】 简单来说,网页设计与背景的关系就像服装和发型的搭配,背景要依照网页设计的流行趋势变化而变化,才能更好地呈现设计师想要表达的情感。 纵观目前互联网上大多网站,不难发现: ◇ 大多网站在首屏采用清晰、写实的大图;但使用抽象隐晦、大尺寸、虚化或模糊的图片同样随处可见。 ◇ 如今色块背景也很流行,但已经不再是那种永不过时的黑白配;相反大多设计师更喜欢在网页设计背景中采用大块的图案。 ◇ 图案和纹理在网站背景的运用也不少,但以往流行的小图案已不再是设计师们的首选;大面积图案与低反差元素反而给网站带来一种微妙的感觉,另外细微的纹理背景也相当流行,给整体网页设计增添更多真实感。 下面,小编逐一说说当中巧妙之处: 网站背景设计技巧一:清晰图像 近年越来越多网站设计采用高清图片作为背景,一方面能直接体现网站的风格,另一方面能迅速吸引用户的注意力。但使用高清图片作为背景时,要注意图片应与网站主题保持一致,同时避免过于繁杂而分散用户注意力。若图片能起到引导作用,效果更佳。 网站背景设计技巧二:模糊或虚化图像 使用虚化或模糊图片作为网站背景的情况会相当复杂,如果你只为了掩饰图片质量低劣而采用虚化效果,这会降低整个网站设计的品质。因此,采用虚化或模糊图片时,首先你要保证图片本身的品质很好,其次你要清楚为什么要将这张图虚化,如何虚化。 如轻微虚化图片能激发用户的好奇心,让他们有种“一探究竟”的想法;但有时非常明显的模糊,同样能带来不错的效果,既可从轮廓中知道图片的大概内容,同时又不会分散用户的注意力。 网站背景设计技巧三:色块 黑白配永远是时尚界的经典,也是最为简单的色彩搭配方案。你可以在暗黑背景中使用大面积的白色色块,使界面看起来更加时尚(反之亦可);同样你也可以在暗黑背景中利用白色线条起到强化作用。当然,你也可以依照自己的想法创作出各种“黑白配”网页设计效果。 如果你觉得黑白配太过单调,也可以利用明亮色彩的大色块,增加界面的视觉冲击力和深度。不过,采用明亮色彩搭配方案时,一定要注意明亮色彩的面积切勿过大,否则会过度刺激视网膜,导致眼睛疲劳。 网站背景设计技巧四:图案或纹理 纹理/图案背景是让你的网页设计脱颖而出的简单方法,无论是使用简单的实心背景还是有质感的元素,都能在视觉上设计出吸引用户视线的效果。但使用纹理/图案背景要注意,尽量保持简单易懂,同时要与页面元素保持较大的对比,既可突出页面的重要元素,同时避免分散用户的注意力。 背景是决定网站基调的主要因素之一。因此,在考虑背景设计时,不光要制作能引起用户兴趣的独特背景;同时还要考虑背景是否会分散用户的注意力,影响界面重要内容的传递。 总而言之,网页设计最重要的原则就是“让用户能轻松快捷地读懂你的网站”。

MENU
網頁設計公司