Godzilla. 2018-12-25
网站建设
创建视觉语言的10个技巧（二）
1.创建UI组件库
从按钮到图标，再到卡片或弹出窗口，创建一个组件库，这样设计中所有元素的使用都是一致的。按钮不应该是一页上的蓝色圆圈，另一页上的红色方块。图标不应该是一个页面上是线性图标的而另一个页面上是彩色面型图标 。这种网站组件的不一致性会误导用户以为点击了不同的网站。
一个好的组件库包括在设计中构建页面所需的所有元素，这些元素适用于不同设备的大小和规模，以及iOS和Android设备的调整。虽然构建通用组件在前端看起来是一项繁重的工作，但是它可以使创建新页面变得轻而易举。
2.创建独特的图片风格
网站制作中无论您是使用照片、视频还是插画，创建和保持图像样式都很重要。这是一个最强大的视觉资产，用户将记住那些印象深刻的优秀网站或品牌。独特的风格涉及到许多方面，如图片的风格，过滤器的使用，视频的速度和构图样式等。
请看下面来自Smashmallow网站（https://smashmallow.com/）的多组图片。即使分别观看，它们也包含将图像与品牌联系起来的常见元素。(不是每张图片上的热气球。)这种独特且统一的风格形象展现了这家公司是谁，以及他们如何与用户进行视觉沟通的。
3.创建动效、动画规范
动画元素也应该遵循一套基本的规则。他们行动快还是慢?它们是自己移动还是仅以悬停状态移动?这些交互效果也有助于建立视觉识别。动画可以为项目设定基调，使用有特定规范和风格的动画效果，它们也可以成功传递品牌形象。
来自dribbble的鸡尾酒动画作品(dribbble.com/shots/4818487-Mojito)，杯中元素有规则地进行圆周运动。想想用同样的视觉语言制作的其他动画会是什么样子。它们也可能以同样的循环方式以同样的速度运动。
4.运用文字加强视觉效果
视觉语言要想有效，还可以与设计中使用的实际文字标题相互配合。如果网站制作的文字和视觉元素不匹配，用户可能产生困惑。文字和图片元素应该一起运作，能创建一个有效强调相同内容的视觉语言画面。
史蒂芬妮的网站（https://steffany.ua/）用颜色、女性化的标志和文字展示了她的网站的主要产品业务。这些片段共同创造了一个完整的画面，不会因为使用了文本、图片等多种视觉信息而产生混乱。
浏览次数： 2550 次
文章评论：