UI设计提高视觉层级的9个技巧
- 格式:docx
- 大小:183.63 KB
- 文档页数:8
UI设计师必须掌握的设计原则一、UI设计的基本原则设计的大原则主要有以下三点:一致性、层级、个性化设计。
1.一致性1)产品视觉设计中的一致性指在各种界面设计元素中使用一致性的视觉语言,降低用户的认知、解读难度。
a.设计过程中建立、遵循一致性,可以使产品更好地符合用户使用预期,加强产品依赖,降低学习成本。
b.在开发过程中,通过对模版等一致性规则产物的使用,提升工作效率。
2)外部和内部一致性a.外部一致性多指产品的设计、内容、行为与用户使用的其他同类应用保持基本一致。
b.内部一致性多指产品的设计、内容、行为在产品不同页面、不同平台上保持基本一致。
2.层级层级是用户对界面设计元素相对重要性的认知和解读。
a.产品的层级规则需统一且完整,从模块到页面到页面上的元素组件都应遵循同一套的层级体系。
b.通过合理的视觉处理手法对层级的特征进行强调,目的建立符合产品设计预期的用户重要性感知。
3.个性化产品的个性化在用户观察、使用行为、体验反思三个环节中体现;视觉设计通过对界面设计元素的个性化处理,影响用户对产品个性的感知;a.产品内在个性会投射在外观上b.行为的个性化设计将影响使用效率和愉悦度c.产品个性化程度取决于产品目的和使用场景二、设计细则参考如何评价一个UI设计或者说如何做一个好的UI设计,可以从布局、文本、色彩等多个维度,按照产品设计的基本原则可罗列具体的标准。
具体到某一个产品实例中,应选取合适的标准进行设计或评价。
1.布局产品内一般会存在一到多种布局的模版,他们之间既有区别,又遵循同一套大的规则。
1)一致性a.产品页面布局应遵循统一的栅格或对齐系统b.不同页面中,功能相同或信息类别相同的设计元素应摆放在页面相同的位置并使用相同的布局方式c.有关联的设计元素归纳为元素分组时,元素组内部、元素组之间的对齐方式、留白体系在产品中保持不变,以减少视觉运动a.层级越高的设计元素占据越重要的页面空间位置b.元素之间的布局留白与元素组之间的布局留白应体现小-大的层级关系c.层级低的元素放在层级高的元素的内部或[空间下方]d.布局上区分可操作、不可操作区域e.层级低的元素使用逐步展开等方式降低其重要程度3)个性化a.需要对横向或纵向对齐方式做特殊处理时,同一时间只打破其中一个的规则b.个性化设计应该在遵循布局系统规则的前提下进行,不应打断、扰乱用户操作流c.针对不同分辨率的屏幕、不同硬件设备做对应的布局设计方案d.针对没有返回内容、返回内容超多的极端场景做布局设计方案4)其他a.第一屏末尾保留对更多内容的暗示b.布局具有一定可扩展性,支持一定范围内的元素数量增加2.文本文本包含标题、主体内容、注释内容、装饰内容等。
UI设计经验总结UI(用户界面)设计是一门追求提升用户体验的艺术。
一个成功的UI设计需要综合考虑用户习惯、视觉美感和功能需求。
通过多年的实践经验,我总结出以下几点UI设计经验,希望对初学者有所帮助。
1. UI设计必须符合用户期望用户是我们设计过程中的核心。
在进行UI设计时,我们必须理解用户的期望、需求和行为。
通过研究用户群体,可以了解他们的喜好、偏好和使用习惯,从而更好地满足他们的需求。
设计师应该站在用户的角度思考,将用户需求放在首位。
2. 保持简洁和一致简洁和一致是一个成功的UI设计的重要原则。
简洁的设计可以减少用户的认知负荷,提高用户体验。
UI界面不应该过分复杂,避免过多的设计元素和混乱的布局。
另外,保持一致性也是很重要的,例如,使用相同的颜色、字体和图标等。
一致的设计可以让用户更快地理解和操作界面。
3. 使用视觉层次和对比度视觉层次是指通过不同的尺寸、颜色和样式等来区分重要和次要的元素。
通过合理的视觉层次可以帮助用户更好地理解界面,并引导用户的注意力。
对比度也是UI设计中很重要的一个方面,合理使用颜色的明暗对比可以让界面更加清晰和易于阅读。
4. 选择合适的字体和颜色在UI设计中,选择合适的字体和颜色是非常重要的。
字体应该易于阅读,而且与设计主题相符。
同时,在界面中使用合适的颜色可以增加界面的可读性和吸引力。
在选择颜色时,建议尽量避免使用过亮或过暗的颜色,而是选择中等亮度的颜色。
5. 留白的重要性在UI设计中,留白是非常重要的。
留白可以帮助界面呼吸和组织,使得界面更加清晰和易于阅读。
合理的留白可以减少界面的混乱感,让用户更加专注于内容。
因此,在进行UI设计时,应该合理利用留白的空间。
6. 进行用户测试和迭代UI设计是一个不断迭代和改进的过程。
在设计完成后,应该进行用户测试,收集用户的反馈和建议。
通过用户测试可以发现设计中存在的问题和不足,并进行相应的改进。
用户测试可以帮助我们更好地理解用户需求,并优化用户体验。
用户界面设计中的视觉层次构建视觉层次构建是用户界面设计中的一个重要方面,它能够帮助用户更好地理解和操作界面。
在这篇文章中,我将详细介绍视觉层次构建的概念、原则和最佳实践。
视觉层次构建是指通过设置不同元素之间的大小、颜色、形状和位置等视觉属性,来建立界面中不同元素之间的层次关系。
通过合理地运用视觉层次构建,可以帮助用户快速理解界面的结构、组织和内容,提供更好的用户体验。
为了构建良好的视觉层次,我们需要合理地运用大小和比例。
对于重要的元素,可以将其放大或突出显示,以便引起用户的注意。
大的元素往往会被用户优先注意到,从而传达出其重要性。
相对于大的元素,小的元素通常会被视为次要的或次要的信息。
因此,通过大小和比例的变化,能够形成明确的层次关系,帮助用户快速识别并理解界面中的不同元素。
颜色也是视觉层次构建中的重要因素之一。
通过巧妙地运用颜色的对比和饱和度,可以在界面中创建视觉重点。
较鲜明的颜色通常会更加吸引人的眼球,而较暗淡的颜色则会被视为次要的。
因此,通过对主要元素使用鲜明的颜色,并对次要元素使用较暗淡的颜色,可以在界面中形成清晰的层次关系。
颜色的运用还应考虑到对比度的合理搭配,以确保内容在不同背景中的可读性。
形状也是视觉层次构建中的重要因素。
通过使用不同形状的元素,可以帮助用户快速区分不同类型的信息。
例如,圆形的图标通常代表着操作或导航按钮,而方形的图标通常代表着内容或选项。
通过这样的设计,用户可以通过形状的差异来快速识别并理解各个元素的功能和用途。
位置和布局也是构建视觉层次的关键。
通过合理地组织和排列界面中的元素,可以帮助用户更好地理解界面的结构和层次关系。
例如,将重要的元素放置在页面的中央或上部,可以使其更加显眼;而将次要元素放置在页面的边缘或底部,可以使其相对不那么突出。
通过对齐和间距的调整,也可以使界面看起来更加整洁和有序。
在实践中,为了构建良好的视觉层次,设计师应该进行合理的信息层次分析。
需要明确界面的核心功能和信息,并确定其在界面中的位置和重要性。
设计优化原则:10个实用技巧1. 简洁性在设计中,简洁性是至关重要的原则。
保持设计简单和明了,能够提高用户体验和理解。
避免过多的细节和复杂的元素,保持界面、图形和文本的简洁。
2. 易用性设计应该易于使用。
确保用户可以快速而无障碍地完成他们的目标。
通过简化工作流程、清晰标识可操作元素以及提供有意义且一致的反馈等,可以增强产品的易用性。
3. 可访问性考虑到不同用户群体的需求,设计应该尽量便于残障人士或特殊需求群体使用。
例如,采用无障碍设计原则并提供合适的辅助功能。
4. 色彩和对比度色彩是设计中不可或缺的因素之一。
选择合适且具有良好对比度的颜色方案能够使内容更加突出,并提高可读性和视觉吸引力。
5. 响应式布局现今移动设备广泛使用,为了适应各种屏幕大小,响应式布局是必不可少的。
通过使用流动的网格布局、弹性图片和合适的媒体查询,确保在多种设备上都能够呈现良好的用户体验。
6. 设计一致性在设计中保持一致性是重要的。
统一使用相同的字体、颜色、按钮样式等元素,可以增加用户对产品或品牌的辨识度,并提高整体美感。
7. 动效与交互巧妙运用动效和交互元素,能够提升用户对产品的参与感和愉悦感。
合适、流畅且个性化的动画和过渡效果可以增加界面的生动性和吸引力。
8. 内容导向在设计过程中,始终以内容为导向。
将内容作为设计决策的核心,并确保设计布局合理、易读以及能够有效地展示信息。
9. 快速加载速度用户对加载速度敏感,因此优化加载速度是非常重要的。
通过压缩图像、减少服务器请求等方式来减少页面加载时间,提升用户体验。
10. 反馈和反思持续收集和听取用户反馈,并不断改进和优化设计。
从用户角度出发思考问题,并利用数据和用户研究来指导设计决策,帮助产品持续进步。
以上是设计优化的10个实用技巧,通过遵循这些原则和技巧,可以提高设计的质量、可用性,并增强用户体验。
视觉效果优化的10个技巧视觉效果优化是 Web 设计中非常重要的一个方面,一个优秀的视觉效果不仅能够让用户感到愉悦,还能增强用户对网站品牌和产品的印象。
下面,本文将分别从颜色、排版、图片等方面,为大家总结出10个视觉效果优化的技巧。
1. 注意配色搭配颜色是 Web 设计中最重要的元素之一,配色的选择不仅要考虑到品牌本身的色彩,还需要考虑用户的使用场景和感受。
比如说,蓝色给人一种安全、可靠的感觉,很适合用于金融相关网站。
而粉红色和紫色则显得比较轻松、时尚,很适合针对女性用户的产品页面。
2. 使用层次感更强的排版好的排版能够更好地帮助用户理解页面的层次和重点信息,同时还能增强用户使用该产品的信任感。
最常用的排版方式就是使用标题和副标题,把信息层次分明地展现在页面上。
另外,通常采用左对齐和右对齐的方式来突出主要内容,中心对齐则显得比较简洁、大气。
3. 少用干扰用户注意力的装饰有时候设计师会为网站添加一些额外的装饰元素,比如说装饰线条或者图片。
但是在使用的时候,我们要尽量避免过度使用这些元素,从而干扰用户对于页面内容的关注,避免让页面显得过于复杂。
同时,我们还需要特别注意图片的清晰度和分辨率,尽可能地保证图片的质量。
4. 适度增加动态效果通过增加动态效果,我们能够为网站增加不少活力。
但是,在使用的时候我们要注意,适度增加动态效果就好,过多的动画效果会使网站显得过于复杂和冗长,影响用户体验。
5. 简介明了的图标和按钮在设计网站时,我们通常要添加一些按钮和图标等元素。
这些元素的设计应该要简洁明了,同时与整个网站的风格风貌相符合。
最好采用扁平化的设计风格,这样能够更好地与整个网站的风格相融合。
6. 人性化的交互一款优秀的产品不仅要有吸引力的设计,还需要配备好的交互方式。
交互需要考虑到用户的使用场景和操作习惯,比如说,为了让用户更容易掌握网站的使用方法,可以采用引导式交互的方式,通过动态提示等方式帮助用户快速地掌握网站的使用方法。
ui界面设计知识点大全UI(User Interface)界面设计是指为用户提供直观、友好和易于操作的图形界面的过程。
在当今数字化时代,UI界面设计在各个领域都扮演着重要的角色,它不仅关乎用户体验,更直接影响着产品的成功与否。
本文将为您详细介绍UI界面设计的一些重要知识点,帮助您了解和掌握UI界面设计的基本原理和技巧。
一、色彩搭配色彩在UI界面设计中起着至关重要的作用。
正确的色彩搭配可以有效地吸引用户的眼球,并能够表达出产品所要传达的信息。
以下是一些常用的色彩搭配原则:1. 色彩搭配要具有统一性和协调性,可以运用主色、辅助色和强调色来构建整体的配色方案。
2. 色彩的饱和度和明度对于表达产品的氛围和情感起着重要的影响,需要根据设计的目标进行合理选择。
3. 色彩的对比度可以突出重要的信息和交互元素,提高用户的可辨识性和可操作性。
二、排版布局合理的排版布局可以使界面更加整洁美观,并提高用户使用的效率。
以下是一些常用的排版布局原则:1. 界面的内容应该有明确的层次结构,通过视觉方式进行分组和组织,使用户能够快速找到所需信息。
2. 文本的排版要符合阅读习惯,适当的字号、行间距和段落间距可以提高可读性。
3. 元素之间的间距需要合理设置,既要考虑到界面的美观性,又要保证用户的点击体验。
三、图标设计图标在UI界面设计中扮演着重要的角色,它可以用简洁的形式表达复杂的功能和概念,提高用户的可理解性和可操作性。
以下是一些图标设计的要点:1. 图标的形状和线条要简洁流畅,并符合使用场景的特点,避免过度装饰和细节。
2. 图标的颜色要符合整体的配色方案,并具有辨识度,用户能够清晰地区分不同的功能和状态。
3. 图标的尺寸要根据所在界面的比例进行合理调整,不宜过大或过小,以保持视觉平衡。
四、交互设计良好的交互设计可以提升用户的体验和满意度。
以下是一些交互设计的要点:1. 交互元素的布局要符合用户的习惯,避免使用户产生迷惑和困惑。
如何提高你的UI设计技巧和创新能力在现代设计行业中,UI设计的重要性越来越被人们所重视。
UI 设计师需要在短时间内创建出令人印象深刻的优秀设计,这需要他们具备良好的技术和创新能力。
所以,这篇文章将探讨如何提高您的UI 设计技巧和创新能力。
1. 学习基本的设计原则和技术知识首先,想成为一个优秀的UI设计师,您需要掌握基本的色彩、排版、字体、平面设计、交互设计原则和技术知识。
这是UI设计中必要的基础知识。
您可以通过在网上找一些相关的基础学习教程或者视频教程来掌握它。
这样能够让您理解设计的基础知识以及适用场景,理解这些将为您今后的设计打下基础。
2. 掌握流行的UI设计工具掌握一些流行的UI设计工具是必要的。
这些工具能够帮助您更迅速、更精确地完成设计任务,与其他UI设计师进行良好和高效的协作。
Adobe XD、Sketch、Figma等都是目前软件市场上较为流行的UI 设计软件。
掌握了它们,您将大大提升您的UI设计技术和工作效率。
3. 研究同行的设计作品做UI设计师需要不断地研究同行的设计作品,学习他们设计的套路和创新。
您可以通过在Behance或Dribbble上找到并观察这些优秀的设计师们的作品,这是一个非常好的学习机会。
此外,有助于您理性地评价自己的UI设计能力,从而不断地提高自己的技能水平。
4. 学习其他流行的设计风格和趋势UI设计风格会随着时间的推移而不断变化。
设计师必须不断关注这些流行的趋势和风格,这可以让您有更多的灵感和设计思路,创造出符合时代潮流的设计作品。
此外,这还意味着您必须保持学习的态度,并根据需要不断更新自己的技能和知识。
5. 寻找灵感和创意灵感和创意是UI设计师的重要素质之一。
如何寻找灵感和创意是一个十分关键的部分。
您可以通过阅读各种与UI相关的杂志、书籍和文章,也可以参观设计博物馆、画廊和展览,或是观察身边的事物,并将所发现的理念应用到您的设计上。
当您不断地寻找和应用新的想法和设计概念时,将使您的UI设计更加具有创意和独特性。
如何快速提高设计能力的六个秘诀设计能力是设计师必备的核心能力之一,而提升设计能力是每个设计师都追求的目标。
本文将为大家介绍六个秘诀,帮助设计师快速提高设计能力,拓展创造力和技术能力。
一、培养审美眼光和观察力好的设计离不开深厚的审美眼光和敏锐的观察力。
通过多观察、多思考、多学习,可以培养自己的审美能力。
可以尝试去参观艺术展览、细致观察自然景色以及研究大师的作品等,从中学习不同的设计理念和风格,扩宽自己的设计思维。
二、注重学习和积累提升设计能力需要持续的学习与积累。
要善于利用互联网、图书馆等资源,学习设计理论、色彩搭配、排版技巧等相关知识。
同时,要多关注设计趋势和市场需求变化,不断学习新的设计软件和技术,保持对行业的敏感度。
三、多进行思维训练和头脑风暴设计是创造性的工作,思维的灵活度和创新能力对于设计师至关重要。
可以通过定期进行头脑风暴、创造性思维训练来激发自己的创作能力。
在面对设计需求时,可以尝试多角度思考,打破常规的思维定势,挑战自己的想象力。
四、多实践和项目经验实践是提高设计能力的有效途径。
多参与各类设计项目,无论是个人项目还是团队合作,都可以提升自己的设计技巧和经验。
在实践中,要勇于尝试新的设计风格和创新的设计理念,通过不断调整和改善作品,不断提高自己的设计水平。
五、与他人交流和合作与他人交流和合作能够帮助我们快速提高设计能力。
可以加入设计社群、参加设计展览或工作坊等活动,与其他设计师进行交流与探讨,并互相启发。
在合作项目中可以学习其他设计师的思维方式和处理问题的方法,提高自己的设计能力。
六、勇于挑战和寻求反馈要勇于挑战自己,迎接新的设计任务。
不断挑战自我,拓展设计领域的同时,也可以锻炼自己的设计能力。
同时,要积极寻求他人的反馈和建议,从他人的角度了解自己的不足之处,并及时改进。
通过持续的反馈和修正,能够帮助我们快速提高设计能力。
结语快速提高设计能力是一个循序渐进的过程,需要持续的学习、实践和反思。
快速提高设计能力的六条方法作为一个设计师,不仅需要具备艺术才能,还需要不断提高自己的设计能力。
设计能力的提高需要时间和实践,但是也可以通过一些方法来加快进程。
下面将介绍六条快速提高设计能力的方法。
方法一:多观察、多思考设计是与生活息息相关的,要提高设计能力,首先需要培养良好的观察力。
到处留意各种设计元素,如色彩搭配、线条结构、形状变化等。
观察可以培养设计师的感知能力和审美素质。
同时,在观察的基础上进行思考,分析发现的现象和规律,思考为什么这个设计好看,如何把这种美感运用到自己的设计中。
不断思考可以提高设计师的思维能力和创造力。
方法二:学习基础知识设计是建立在一定的基础知识上的,要快速提高设计能力,首先需要学习相关的基础知识。
这包括设计原理、设计史、设计工具的使用等。
通过学习基础知识,可以了解设计的发展历程和现状,学习先贤的设计思想和方法,并将其运用到自己的设计中。
同时,学习设计工具的使用可以提高设计师的操作能力和效率,为设计提供更多可能性。
方法三:参与设计项目获取实践经验是快速提高设计能力的关键。
要尽快积累实践经验,可以主动参与设计项目。
可以找一些小型的设计项目,或者对已有的设计进行改进,从而锻炼自己的设计能力。
参与设计项目可以让设计师了解实际需求和限制条件,学会根据客户需求进行设计,并在实践中不断优化和改进自己的设计方案。
方法四:与其他设计师交流设计是一项团队合作的工作,在与其他设计师的交流中可以学到很多东西。
可以参加设计师社群或者与其他设计师进行线上线下交流,分享自己的设计经验和心得,同时倾听他人的建议和意见。
与其他设计师交流可以拓宽自己的设计视野,了解不同的设计理念和思路,借鉴他人的设计经验和方法,提高自己的设计水平。
方法五:定期进行设计作品的回顾和分析设计师在工作中会完成大量的设计作品,定期进行作品的回顾和分析是提高设计能力的有效方法。
可以将作品按照不同的类型和风格进行分类,然后对每个类型的作品进行回顾和分析。
ui设计专业知识点UI(User Interface)设计是指用户界面设计,是一个关于人机交互的设计学科。
它主要聚焦于用户在产品或系统上的使用体验,并通过合理的可视化和交互设计提升用户满意度。
下面将介绍一些UI设计的专业知识点。
一、色彩搭配色彩对于UI设计来说非常重要,因为色彩可以传达情感、引导用户注意力、增加产品的吸引力等。
在色彩搭配方面,需要了解色彩搭配的原理和常用的色彩搭配方案。
例如,主色调与辅助色彩的搭配、冷暖色调的运用等。
二、界面布局界面布局是指在设计中对于元素的排列和组织方式。
合理的界面布局可以提高用户的使用效率和体验,需要考虑信息结构、模块的划分、内容的呈现等因素。
三、字体选择字体不仅仅是文字的表现形式,也是传递品牌形象和产品特点的重要方式之一。
在UI设计中,需要选择适合的字体,包括字体的风格、字重的选择、字号的合理搭配等。
四、图标与按钮设计图标和按钮在用户界面中经常出现,它们可以帮助用户快速理解功能和操作方式。
UI设计师需要具备设计出简洁、易识别、符合品牌风格的图标和按钮的能力。
五、交互设计交互设计是UI设计中至关重要的一环,它关注用户与产品之间的互动体验。
合理的交互设计可以提升用户的满意度和使用效率,需要考虑用户流程、界面反馈、操作反馈等方面的设计。
六、响应式设计响应式设计是指根据用户的设备和屏幕尺寸自动适应不同的布局和功能。
UI设计师需要了解不同设备的特点和响应式设计的原理,以确保在不同终端上都有良好的用户体验。
七、视觉设计原则视觉设计原则是指在UI设计中应用的一些基本原则,包括对称与不对称、重复与鲜明对比、平衡与层次感等。
这些原则可以帮助设计师在视觉上呈现出整齐、有序和美观的界面。
八、品牌识别品牌识别是指在UI设计中体现品牌形象和特点的设计。
UI设计师需要了解企业或产品的品牌定位和形象,将其融入到界面设计中,以提升品牌的认知度和用户对品牌的好感度。
九、用户研究与测试用户研究与测试是UI设计过程中不可忽视的环节。
UI设计提高视觉层级的9个技巧
有效的视觉层级是产品成功的基础,能以有效的方式组织UI元素,使内容容易理解,看起来舒适整洁。
视觉元素的呈现对用户体验有很重要的影响,如果组成元素能被巧妙地运用,用户就能轻松地浏览产品,和产品互动,并且享受这个互动过程。
声明:原创翻译,如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。
那么,怎么做出有效的视觉层级?当然,不同的产品要求不同的方法,但仍有一些相同的方法帮助组织UI元素。
接下来我会提供一些有用的技巧,关于如何为移动和web产品创建具有说服力的视觉层级。
1、始终记住商业目标
产品背后总有商业目标的支撑。
为了达到这个目标,设计团队需要梳理出哪些UI元素更为重要,根据他们的角色排优先级,比如在电子商务网站上的所有元素各自都有他们的任务。
产品图片通常是主要的视觉焦点,因为需要鼓励用户考虑购买。
接下来是图片的标题,标题要解释产品是什么。
然后是CTA按钮,促使用户购买产品。
通过思考网站或app的商业和市场目标,设计团队能有效地优化视觉层级,让产品在一堆信息中脱颖而出。
UI设计
2、考虑浏览轨迹
在我们之前的文章中提过,在仔细阅读网页前,人们会大致浏览下什么是他们真正感兴趣的。
不同的研究,包括尼尔森-诺尔曼团队做的研究,都已表明被广泛采用的浏览模式是F型或Z 型。
F型主要是出现在有大量内容的页面或屏幕上,比如博客、新闻平台等,用户的视线是以F型浏览:首先,用户在水平方向浏览页面顶部的信息,然后往下浏览页面,再在比较窄一些的水平方向浏览页面,最后在垂直方向,阅读页面左边的信息,寻找页面段落句子的关键词。
Z型出现在没有大量内容的文本上,或者不需要往下滑动页面。
这个轨迹是像这样的:用户首先会在左上角浏览页面的标题,寻找关键信息,然后浏览到右上角,最后从左到右沿着水平方向浏览页面底部。
了解了这两个模式后,设计师组织内容时会把核心UI元素放在最容易被看到的地方来吸引用户。
3、易用性优先
我们常常认为视觉层级好像只是针对审美层面,但其实不是这样的。
首先,通过构建和组织视觉元素,设计师需要确保产品清晰可用,导航能起到作用。
光建立在审美层面的视觉层级是不
能起到有效作用的,组织结构差的用户界面会带来不好的用户体验。
所以,构建视觉层级时,设计师需要考虑UI元素的功能是什么,以及它们在引导用户的过程中所扮演的角色。
4、留白
UI设计
留白或者说负形,不仅仅是指界面元素之间的区域,它也是视觉构成的一个关键部分。
留白是一种能让所有界面元素被用户注意到的工具,设计师们能用它组合或分离UI组件,以创建有效布局。
而且留白有利于强调需要用户特别注意的元素,也是创建视觉层级的有效工具,需要设计师平衡使用。
5、使用黄金比例
我们最新的文章中专门有一篇是介绍黄金比例在设计中的运用。
不同尺寸的元素有一个精确的比例在审美上被认为是看起来最舒服的,这个比例是1:1.618,经常被绘制成一个贝壳形的螺旋,你可能看到过。
设计师在绘制草稿阶段就经常使用黄金比例,这有助于规划排版架构,以适合的比例缩放用户界面元素,使用户看起来舒适。
6、使用网格
网格是个用于设计不同阶段的关键工具,也包括建立视觉层级的阶段。
网格有助于组织组件,使它们以合适的尺寸和比例呈现,而且能帮助设计师有效处理负形,因为网格展示了元素是否按比例放置。
7、添加一些颜色
颜色的选择和组合对视觉层级来说很有必要,因为它们能帮助用户识别核心元素。
颜色有它们自己的层级,在用户心里具有影响力。
有像红色、橙色这样很强的颜色,也有像白色、米色这样很弱的颜色。
强烈的颜色很容易被注意到,所以设计师经常用来突出元素,增强对比。
把一种颜色运用到几个元素上,你会发现它们在某种程度上是有联系的。
比如,如果你选择了一个红色购买按钮,当用户需要的时候,能凭直觉找到。
8、注意字体
视觉层级包括一个核心分支叫做排版层级。
通过修改和组合文字,排版层级旨在形成起最有意义、最突出文字信息和普通文字信息之间对比。
通过调节字体大小、颜色、字重和对齐关系来
实现字体的转换。
不同的字体能将文字信息分割成不同的层级,以便用户可以逐渐感知信息。
不过,字体尽量控制在3种以内,因为使用太多字体会显得页面很杂乱,设计不协调。
9、Web三层级和移动两层级
如上所说,不同的字体形成了排版的优先级,排版层级由标题、次标题、文本、按钮和说明文字等构成。
有3个排版优先级:第一、第二和第三层级。
第一级包含最大的类型,旨在把用户注意力吸引到屏幕的核心信息。
第二级提供容易浏览的文本元素,帮助用户引导到内容上。
第三级适用于正文文本,通过相对小的类型展示一些额外的数据。
很多情况下,web产品包括3个层级,因为能展示更多的信息。
另一方面,在移动端设计上建议设计师保留2个层级。
小屏不能为3个层级提供足够空间,所以像次标题这种第2层级的元素要放在一边,让页面设计更加简洁。
有效的视觉层级不单是指美感,旨在提供问题解决交互系统和友好的用户体验。
为了创造有效的视觉层级,设计师需要考虑功能性和商业目标来组织所有UI元素。