文化创意类网站界面设计需求与案例分析

时间:2019-09-27

　　摘    要：　针对文化创意类公司PC端网站宣传展示等需求的问题, 以亿凡映画 (北京) 文化传媒有限公司为案例, 根据网站UI设计规范, 在网站配色、整体布局、文字设计、交互设计方面进行设计。提出塑造企业国际化时尚艺术形象的网站UI设计解决方案, 实现从视觉效果到交互操作提升用户体验效果的目标。

　　关键词：　文化创意; 网站UI设计; 用户体验;
 

　　Abstract：　Aiming at the demand of PC website of cultural and creative companies for propaganda and exhibition, taking IF STUDIO ( Beijing) Culture Media Co., LTD as an example, following the website's UI design specification, to design website interface in terms of color matching, overall layout, text design and interaction design, this paper provides website UI design solution that can improve user experience and create the international fashion and art image of enterprises from visual effect to interactive operation.

　　Keyword：　cultural creativity; website UI design; user experience;

　　0、 引言

　　现代社会互联网发展之快、普及之广早已超出人们的估量, 生活与互联网高度融合, 通过互联网可以更加便捷地获得生活所需, 人们已然无法脱离互联网。与此同时, 各类企业通过网站页面在互联网上宣传展示企业文化及商业产品的方式也越来越被消费者认可。企业要想在浩瀚的互联网海洋中吸引用户眼球, 获得更多的关注, 成功经营, 就需要在网站用户界面设计方面大做文章。一个成功的网站UI设计产品, 会给用户带来非凡的视觉享受和操作体验, 使用户在浏览网站时感知到与设计者的情感交流。文化创意类产业以其特有的“文化”和“创意”行业属性, 对用户界面设计具备天然的高水准要求。本文以亿凡映画 (北京) 文化传媒有限公司网站UI设计为案例, 通过用户需求分析, 根据网站UI设计规范, 提出设计理念, 并最终实现网站界面设计。

　　1、 网站UI设计

　　UI即User Interface (用户界面) 的简称。网站UI设计是指对网站界面的人机交互、操作逻辑、界面美观的整体设计。好的网站UI设计不仅能使网站充分体现其用途、特色, 还能使网站操作更加简单、舒适, 提升用户体验, 增加网站浏览量。网站UI设计可以理解为协调用户与网站界面之间关系的设计[1]。

　　2、 文化创意类产业及企业背景

　　文化创意产业Cultural and Creative Industries, 是一种在经济全球化背景下产生的以创造力为核心的新兴产业, 强调一种主体文化或文化因素依靠个人 (团队) 通过技术、创意和产业化的方式开发、营销知识产权的行业。文化创意产业主要包括广播影视、动漫、音像、传媒、视觉艺术、表演艺术、工艺与设计、雕塑、环境艺术、广告装潢、服装设计、软件和计算机服务等方面的创意群体。

　　亿凡映画 (北京) 文化传媒有限公司致力于打造高端视觉艺术产品, 以团队的核心专业技术、完善的全流程服务、高水平的创新制作能力, 着力打造国内领先、国际一流的高品质数字内容产品。主要承接业务为人物、商品的平面及视频动态产品。人物影像服务对象主要以国内外当红影视明星为主, 例如影视明星黄晓明、体坛明星易建联;商品影像服务主要合作对象以国内外知名品牌为主, 例如汽车品牌MASERATI、运动服装品牌ADIDAS。主要合作媒体有《男人装》《芭莎男士》《时尚健康》《时装》《瑞丽》《时装男士》等。

　　3、 文化创意类网站界面设计需求分析

　　文化创意类网站面向用户主要由企业自身和面向客户所组成。2类用户需求既有相同之处, 又存在根本性差异, 需要通过深层剖析后区分和趋同化处理。区分是要分清用户角色, 企业自身的需求是以品牌打造和形象宣传展示为最终目的的, 文化创意类企业发展的基石是人, 个人或是团队的成员是宣传的引线, 从人员简历到作品, 都是以人的经历贯穿始终;文化创意类企业的核心竞争力是产品, 成功的案例是宣传的重点, 在网页中需要着重展示的环节, 通过与企业负责人座谈沟通, 了解企业文化理念, 参考分析国内外同行业网站UI设计成功案例, 能快速准确地定位企业自身需求。面向客户的需求要根据不同使用群体进行调研分析, 选择制作用户需求分析表等手段, 根据需求内容、目标用户、需求种类、喜好、年龄、职业、受教育水平、关注内容、关注时间、关注场景等内容进行用户调查分析, 并总结提出网站UI设计 (外观、交互) 理念及设计方案, 表1为亿凡映画 (北京) 文化传媒有限公司网站UI设计需求分析表。

　　表1 亿凡映画 (北京) 文化传媒有限公司网站UI设计需求分析表

　　表1 亿凡映画 (北京) 文化传媒有限公司网站UI设计需求分析表

　　趋同化处理是在理清企业自身和面向客户需求后, 进行整理和分析, 最终形成一整套全面设计方案。一个网站最终只能有一套UI设计方案, 设计师需要求同存异, 无法顾及所有用户需求, 在方案中分清主次。一个好的网站UI设计, 需要突出中心, 在用户浏览过程中, 既有用户感兴趣的内容, 吸引用户浏览, 又能引导用户浏览设计师想要传达给用户的内容, 流畅而舒适的浏览体验需要网站UI设计师精心的设计和布局。

　　3.1、 普适性网站UI设计需求分析

　　网站UI设计普适性需求分析, 需要遵循5W1H原则, 5个“W” (WHO, WHAT, WHEN, WHERE, WHY) 和1个“H” (HOW) 开头的结构问句。

　　(1) 谁 (WHO) 。谁是目标用户, 喜好是什么, 年龄层次, 职业, 文化教育水平。
　　(2) 什么 (WHAT) 。用户会做什么, 在网站、应用和产品里用来完成什么样的任务, 用户目标是什么。
　　(3) 何时 (WHEN) 。用户可能使用特定产品或技术的时间点, 以及一些需要探索的日常规律和行为习惯。
　　(4) 哪里 (WHERE) 。用户的使用场景, 即用户执行特定任务或者使用关键技术的实际地点, 分为3类: (1) 常用场景; (2) 极端场景; (3) 潜在场景。
　　(5) 为什么 (WHY) 。用户的所作所为的潜在的情感和理智驱动因素, 以及这么做的根本原因。
　　(6) 如何 (HOW) 。用户执行任务或达到目标所采取的一些措施的细节点。

　　3.2、 文化创意类网站UI设计需求分析

　　网站页面最重要的部分在于它能否有效地吸引访客的注意力。问题的关键在于, 网页能否在几秒钟内解答访客心中的3大疑问: (1) 这是个什么性质的公司? (2) 这个公司具体是做什么的? (3) 和竞争对手比, 你的优势在哪儿?通过对公司进行用户访谈、实地考察及同类网站大量调研、信息搜集等, 提出本案例的网站UI设计理念。

　　亿凡映画 (北京) 文化传媒有限公司经营运作模式围绕打造明星摄影师团队开展, 主要业务为人物、商品的平面静态图片及视频动态影像宣传产品。人物影像服务对象主要以国内外当红影视、体坛明星及知名品牌为主;通过有态度的静态动态影像展示, 反映摄影师及团队的人文态度和对时尚潮流敏感度的综合把握。

　　公司的灵魂核心是摄影师团队, 包装摄影师团队、打造精品级竞争核心力量是公司宣传的重中之重, 而最能体现出这一特色的关键除了摄影师团队介绍外, 主要是针对以往成功产品案例的推广。静、动态的影像作品是最强而有力的公司形象代言, 有视觉冲击力的作品是网站UI设计中需要凸显的内容, 布局和配色的设计都将要围绕着这个关键内容展开。

　　文化创意类公司网站UI设计不能脱离公司的商业目标, 需要考虑全局影响, 不能为了实现部分功能而去影响其他体验。网站UI设计师需要站到一个更广大、更宽阔的平台, 从设计视角来引导公司根据发展和相对长期的机遇提出设计需求;明确需要帮助公司用户解决什么问题, 并通过沟通, 挖掘摄影师团队成功案例作品内涵, 通过网站UI设计展现公司经营理念, 与企业达成共识。

　　4、 文化创意类网站UI设计

　　4.1、 网站配色

　　多项研究证实, 人类依靠5种感官从外部世界获取的信息中很大一部分都来自视觉, 而视觉中的色彩信息是非常重要的。在色彩三要素中, 色相对人类信息的影响最大。人类在捕捉、认识色彩时, 首先识别的是色相, 其次是明度和纯度。设计作品中色彩的印象非常重要, 可以毫不夸张地讲, 设计作品的印象在很大程度上是由使用的色彩和配色效果决定的[2]。

　　本案例网站UI设计中的配色理念以艺术与商业完美结合为宗旨, 了解网站所要传达的信息, 选择能够加强这些信息的颜色, 可以选取一种作为网站的主色[3]。整体色彩搭配主色调以早期黑白摄影作品中黑色为灵感向经典致敬, 为了避免高纯度黑色容易产生视觉疲劳的弊端, 选用黑灰色#0B0A10作为网站UI设计主色调, 既神秘又高级。首页选用明星影像并采用全屏幕尺寸处理, 为配合黑灰色背景, 进行了图像的后期调色处理, 使图像质感凸显, 画面感更强。由于网站所采用的成功案例作品色彩丰富, 因此配色选用了灰白色, 通过调整文本色彩明度, 使文字呈现不同的明暗层次, 用以融合或突出强调部分标题和展示当前状态, 分别应用在导航文字、页面显示文字上, 网站LOGO则使用明度稍高的#E9E9E9。另外需要重点强调的部分, 选用最能使人倍感醒目的黄色系, 加之对色彩的纯度、明度处理, 得到使人视觉舒适的黄色#F6A63F。图1轮播注释部分采用了提高明度的方法, 颜色设定为#D2AD60。

　　图1 网站首页 (PHOTOS显示模式)

　　
　　4.2、 整体布局

　　首页采用整张大图Banner结合简单的栅格的布局方法, 使用整张摄影作品图像, 采用全屏幕尺寸显示模式, 能给浏览用户带来视觉感官的刺激;通过冰冷的计算机显示器, 用户能感受到图像的温度;鲜活的生命通过角色塑造和自身魅力的展示, 使浏览者体会到强大的视觉冲击力, 享受着感官和情绪的愉悦。首页左上部采用经典布局策略, 放置了公司LOGO。首页上部采用文字导航模式, 为了营造首页的整体融合感, 并没有使用传统导航条布局, 热点响应采用了简捷的下划线条式。首页中所占篇幅最大的是大型轮播器图像的主显示部分, 这种布局设计干净清爽, 有足够强的视觉表现力, 并且常常采用的响应式设计和布局都能够为用户展示充足的内容, 供用户浏览和探索。首页中下部的滑动轮播显示部分增加了浏览用户操作乐趣和交互性, 选取现今最具代表性的影视歌明星作为网站首页轮播内容;高质量的图像, 每张都能讲述一个故事, 充满质感和内容的生动画面能直观地增加网站访问量, 引起浏览用户的探索欲, 既能增加网站的关注度, 又能提升公司的形象时尚度。在页面布局中, 每个元素都各司其职, 并且整个流程是富有逻辑的, 顶部大图足以营造氛围, 给予用户特定的体验, 下面的次一级元素能够做很好的支撑。

　　子页面根据需要展示的内容不同, 分别采用了左右分屏式和大尺寸显示模式。在商业合作导航子页面中, 采用了左右分屏式显示模式, 相比于传统的一栏式的设计, 将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的2栏呈现不同的信息, 是分屏式设计的最典型特征;2栏的信息可以包含相同类型的元素, 也可以呈现不同属性的媒体内容。本案例虽然采用分屏式显示模式, 但是借助了传统左右框架式结构, 表现形式既新颖, 又尊重用户浏览习惯。右侧点击分类导航, 左侧呈现大尺寸图片。分屏式设计完美地解决了用户需要同时呈现2个不同内容的需求, 这种UI界面突出了这2项内容的对等地位, 让用户自行浏览, 或者做出选择, 如图2所示。

　　图2 网站子页面左右分屏显示模式

　　大尺寸显示模式, 是一种极简化的设计, 本着“少即是多”这一设计理念, 开放式的空间让用户感觉更加轻松, 也使其中展现的内容更容易被聚焦。极简主义的网页设计在建筑学或任何其他艺术中都有相当长的历史, 与大多数人看到充斥着元素、图片和弹出窗口的网站, 都是相悖的概念。其优势之一是屏幕上的功能少, 有助于人们集中注意力在重要的信息上, 而不是为了寻找而四处搜索;另一个优势是减少了加载时间。在信息无处不在的网络世界, 人们往往容易迷失初心, 简单直接的呈现方式越来越被推崇, 如图3所示。

　　图3 网站子页面大尺寸显示模式

　　
　　4.3、 文字设计

　　网站UI设计中文字设计的目的是创造文字信息的视觉差异。文字设计不仅仅是让人们识别文字的内容, 更是为了向人们传达一种不同于常规的文字设计视觉效果, 通过艺术加工, 用和谐、美观、独特的表现方法区分不同的文字, 深化浏览用户的印象, 产生视觉记忆, 对文字背后所产生的品牌形象、产品特点加深记忆, 主要从样式、大小、颜色等文字特性进行表现[4]。

　　考虑到公司提升国际化公司宣传力度的需求, 除摄影教学子页面外, 网站其他文字使用了全英文。无论是中文还是英文, 文本样式的选择最能体现网站的品味。普通的英文文本样式选择, 无个性, 没有发挥空间, 因此需要安装英文字体, 设计文字, 增加网站页面浏览的趣味性;同时需要注意网站字体风格的规范, 字体需要清晰易识别, 每张页面最多出现2种字体, 而为了网站风格的统一性, 网站中也最多出现3种不同字体。网站英文字体选择了Vijaya、MV Boli和Segoe Script。摄影教学子页面选用字体为楷体。

　　网页UI设计中的字号选择, 要遵循一定的设计规范, 最小字号为12 px。由于单数的字号在显示时会产生毛边, 所以要选择双号字体。可以通过字号的大小来实现文本在网页中的重要程度。例如首页中的关键文本“Photograph”选用字号为80 px, 为页面中最大字号, 左下角“share it to others”选用字号为16 px, 为页面中最小字号。

　　为了与网站页面整体配色保持协调, 文字选用灰白色作为基色, 通过明度的调整, 实现层次和功能的区分;对于当前显示内容的文字提示, 采用在基色的基础上提高明度的方法, 使文字凸显。例如首页中关键文本“Photograph”选用颜色为#F0F0F0, 相对明度最高, 首页中非主显示文字“videos”选用颜色为#BFBBBB, 明度相对较低。

　　4.4、 交互设计

　　交互设计 (Interaction Design) 是定义、设计人造系统的行为的设计领域, 它定义了2个或多个互动的个体之间交流的内容和结构, 使之互相配合, 共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系, 以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互界面设计在设计过程既要符合用户的操作方式, 也要迎合用户的浏览习惯。一方面可以使信息更加醒目, 另一方面可以引导用户进行阅读, 围绕着以人为本的设计原则, 遵循实用性、方便性、趣味性的要求, 通过人性化设计, 提升用户体验, 交互界面设计中的交互设计是一种使用户在读取网站信息的同时能够参与到其中, 在娱乐的同时能够获得其所需的设计, 运用好与坏直接影响到网站的质量[5]。

　　在首页中采用图像、视频分类的显示模式, 也是本案例的特色之一。首页图像显示模式下, 首页页面采用全屏幕大尺寸的轮播式交互设计, 通过左右方向按钮点击, 实现图像轮播滑动, 并在首页全屏幕大尺寸显示图像;首页视频显示模式下, 采用鼠标经停放大的交互设计, 当鼠标滑动经停视频栏目, 视频栏目放大, 单击播放按钮实现视频播放, 如图4所示。

　　图4 网站首页视频显示模式

　　5、 结论

　　文化创意类网站UI设计, 以亿凡映画 (北京) 文化传媒有限公司为实际案例, 通过细致的用户需求分析、网站交互设计, 跟进视觉开发, 保证案例实现, 将文字、图片、视频等元素融入网站UI设计之中, 在表现力和交互性方面体现尤为突出, 提升了用户体验, 塑造了企业在国际上、行业内的时尚领军艺术形象。

　　参考文献：

　　[1]张晓玲. UI界面设计[M]. 2版.北京:电子工业出版社, 2017:1-2.
　　[2]奥博思科编辑部.配色设计原理[M].北京:中国青年出版社, 2007:172-173.
　　[3]杨婷婷.浅析色彩在大型网站界面设计中的应用[J].艺术与设计 (理论) , 2012 (12) :60-61.
　　[4]刘小艮, 徐立伟, 姚红玲.网页UI设计[M].北京:北京师范大学出版社, 2017. 95-96.
　　[5]李智, 丁慧君.文化资源类网站中的交互界面设计[J].艺术教育, 2014 (5) :215.

TAG标签： 文化创意  用户  

上一篇：人工智能的发展现状与困境
下一篇：图书共享web网站系统构建分析