西南科技大学优秀毕业设计说明：小红豆—网站UI和VIS系统设计说明

第一篇：西南科技大学优秀毕业设计说明：小红豆—网站UI和VIS系统设计说明

Southwest university of science and technology

本科毕业设计

小红豆—网站UI和VIS系统设计说明

学院名称 专业名称 学生姓名 学

号

文学与艺术学院

艺术设计 库小伟

指导教师

王小童

二〇一三年六月

西南科技大学本科生毕业设计 I 小红豆—网站UI和VIS系统设计说明

摘要：从豆瓣（douban.com）的创立，开始了中国文艺类网站品牌，到如今的番茄派（fqpai.com）、思念往昔（missever.com）、topit.me、句子迷（juzimi.com）。清新文艺类网站逐渐走进了大家的视野并被网民所接受。

小红豆网站的定位为文艺网站，小红豆按照淡雅、自然、朴实、超脱、静谧的风格特点而设计。服务于钟爱书籍、音乐、电影，喜欢花卉，喜欢独居，向往自由等文艺的青年群体。小红豆网从网站UI设计到VIS设计风格追求一种纯朴简单的格调。

关键词：文艺； 小红豆； 网站； UI； VIS

西南科技大学本科生毕业设计 II

xiaohongdou.com, web UI and VIS system design

Abstact: From douban(douban.com)was founded and began a fresh artsy website brand in China, until now the tomatoes(fqpai.com), miss the past(missever.com), topit.me, sentences(juzimi.com).Fresh artsy website gradually walked into everyone's vision and accepted by users.Small red beans net fresh for locating at the site, small red bean according to quietly elegant, natural, simple, detachment, quiet style and design.Service to love books, music, movies, like flowers, like living alone, pure and fresh and literary youth groups such as freedom.Small red beans net from web UI design to VIS design style, the pursuit of a simple simple style.Key word: Literature and art, small red bean, website, UI, VIS

西南科技大学本科生毕业设计 III

目录

引言...................................................................1 1.主题创意的概述.......................................................2

1.1 设计包括的范围..................................................2 1.2 设计的创意来源..................................................3 2.设计区别于其他文艺网站作品的特点.....................................4

2.1 具有独特的操作性让人印象深刻....................................4 2.2 设计形象的可识别性度高..........................................4 3.围绕主题的系列UI和VIS设计..........................................6

3.1 网站UI页面设计.................................................6 3.2 网站形象LOGO设计...............................................6 3.3 海报宣传物设计..................................................6 3.4 VIS系统小件设计................................................7 结论...................................................................8 致谢...................................................................9 参考文献..............................................................10 附录一................................................................11

西南科技大学本科生毕业设计

引言

文艺网站是文化类网站的趋势，从豆瓣网的成立到如今文艺网站如雨后春笋一般大肆兴起，足矣看出中国广大网民对此类网站的青睐。截至2011年12月底，中国网民规模突破5亿，达到5.13亿，互联网成为人们日常生活中密不可分的一部分。近年来移动互联网的兴起也牵动和变革了互联网生活的方式，从此，大众互联网时代如此而至的到来，随时随地获取想要的信息得以实现；从facebook市场的冷却，到以twitter、新浪微博等微博客平台的兴起证实了移动互联网的繁荣开端，App应用开发成为互联网行业的宠儿；然而于此同时，各大文艺类网站以及文艺类app应用得以兴起，证实在人们的生活中是需要文艺的存在的，有着对文艺信息的需求。本次毕业选题以网站UI为设计类别，主题定位为文艺网站，结合我自身生活的兴趣爱好和周围关系圈的氛围确定了设计风格为小清新。

我的这次的毕业设计中的把小清新定为设计风格，即遵循淡雅、自然、朴实、静谧的特点，以简洁为主，按照“少即是多的”设计理念进行设计。通过一个实际设计操作的过程，在过程中会让人亲身经历到网站UI设计和系统构架的方法中，了解到互联网公司的项目开发过程。文艺是生活中的重要形式，在当今快节奏的生活方式中显得尤为重要，可以起到让人们心理宁静、淡雅的作用，可以净化心灵，缓解疲劳，增加精神生活质量。

西南科技大学本科生毕业设计

1.主题创意的概述

如网站主题，整个设计和创意都是围绕着“小清新”这以文化风格展开设计的，“小清新”是种文化风格和方式，一种追求淡雅、自然、朴实、静谧的生活方式和境界。创意核心是以密斯.凡.德.罗提出的：“少即是多（Less is more）。”进行构架设计，力求以最少的东西说明更多的内容。

“小清新”最初指的是一种以清新唯美、随意创作风格见长的音乐类型，也就是人们常说的Indie Pop，即独立流行，之后逐渐扩散到文学、电影、摄影等各种文化艺术领域。如今，这种起初颇为小众的风格，现在已逐步形成一种亚文化现象，受到众多年轻人的追捧。在中国，偏爱清新、唯美的文艺作品，生活方式深受清新风格影响的一批年轻人，也被叫做“小清新”。无论是作为一种理想的生活方式，还是个人憧憬的美好意境，小清新都是秉承淡雅、自然、朴实、静谧的特点而存在着。小清新成为一个群体，她们通常有着非常相似的爱好，如喜欢的书籍、音乐、电影，喜欢花卉，喜欢独居，向往自由的生活。小清新一族，不脱离群众，但常常想要通过某些东西表现出她们的不同，是有品位的，并且不是土大款的品位。她们在追求物质生活的同时也向往着纯朴简单的情调。

设计突出纯朴简单，又要迎合青年群体活泼的特点，加入温馨元素，以温馨、简单、自然为设计基础，进行进一步的编译设计。在小红豆网站设计中，应该有一种孩子气，这种孩子气就是童真，童真是一种感觉也是一种品质。作品中的童真不能简单的理解为一种调皮、活泼，应该是把对此类的感觉进行抽象化的概况，形成有统一性、主体性的构件，从而成为整个系统的重要部分和亮点。小红豆在LOGO设计上以曲线美和童真为基础进行创作，逐步形成了一个圆圆的脸和一个大大的眼镜大大的笑容元素的标志，在字体设计上避免过多的直线，以弧度和曲线力图表现字体活泼、天真的一面。整体UI和VIS设计简洁明了，避免所有不必要和累赘的部分。

1.1 设计包括的范围

设计的范围为网站UI设计和VIS设计。UI设计包括：网站页面设计、网站图标、体验流程设计（用户使用流程体验）；VIS设计包括：网站LOGO，宣传册、标准色、纪念品、徽章、工作证、名片、海报等系列设计。设计整体力求形式和设

西南科技大学本科生毕业设计

计风格的统一，以简洁的形式进行设计体现。

1.2 设计的创意来源

本次设计的灵感起源于平常吃的红豆酸奶，并衍生出小红豆这一较为文艺的名词，成为了本次设计的名称。在创意构思中受到了传统文艺网站，如：豆瓣；文艺类书籍如：《小时候》，新浪微博等的影响。虽然说本次设计创意的来源覆盖面和创意点很多，但是其中最核心的还是红豆寓意和小清新文化风格并与其相关联的内容方面的关联。小红豆是以小清新为主题内容的文艺网站，秉承淡雅、自然、朴实、静谧的特点。

以密斯.凡.德.罗提出的：“少即是多（Less is more）。”的现代主义贯穿设计的整个主题，在整体设计追求简洁的同时力求细节的精细处理。设计中多采用Metro（基于瑞士平面设计的设计原则）中的色彩和块面设计理念，以单色系为主要设计形式，以点线面为设计的基本元素，巧妙运用黑白灰进行设计点缀，尽可能的减少设计上的视觉负担，再设计上用减法思维进行设计，力争做到简洁而不简单。

西南科技大学本科生毕业设计

2.设计区别于其他文艺网站作品的特点

文艺类网站数量繁多，近年来雨后春笋一般纷纷建立，以豆瓣为首的文艺网站阵营占据了大多数的文艺互联网市场。不过，大部分文艺网站千篇一律缺乏加强的可识别性，对品牌识别度和网站整体艺术性设计处理并不看重，网站内部整体性不强，细节处理不到位，在部分细节处理中给人不舒适的感觉，视觉效果较差。

除去豆瓣之外，其他的网站设计均在前端UI设计和VIS设计上大有欠缺，表现为：网站设计无创意点，网站主题色不明显，色调混乱；过多的广告破坏了网站整体形象。

小红豆设计上依据“少即是多（Less is more）。”的设计理念，结合Metro（基于瑞士平面设计的设计原则）中的色彩和块面设计理念，在整体设计和细节把握方便下足功夫。采用时间轴形式的文艺流形式展示文艺内容，在整体设计中把握色调和设计风格的统一，凸显网站识别度，UI和VIS方面进行深入推敲设计。

2.1 具有独特的操作性让人印象深刻

小红豆参照和改进了传统的文艺网站操作流程和方式，结合微博的用户体验，设计出了时间轴形式的文艺流形式展示文艺内容，在首页，好的作品第一时间有层次的进行展示，用户可以简单明了的看到优质的文艺作品。以“少即是多（Less is more）。”的设计理念，结合Metro（基于瑞士平面设计的设计原则）中的色彩和块面设计理念为设计基础，以期尽可能的减少用户视觉上的负担，大大加强了网站的可读性和阅读便利行。

网站识别度和形象可辨度高，独特个性的LOGO和清新简洁、统一性强的具有较强主题识别度的网站形象可以第一时间传递网站信息，使用户对网站的印象得以进一步的加强和提高。

2.2 设计形象的可识别性度高

在设计作品中，设计形象的可识别性十分的重要，形象可识别度的高低侧面体现出了设计作品的成败与否。在本次设计中，设计整体风格一致、统一，在细节和整体的把控上做的较高。在UI和VIS设计中，统一使用单色设计和点线面的设计元素；在每一个作品力求创新的基础之上，力求整体的高度一致，风格和创新同步，设计的统一度较高，设计的形象具有很高的可识别度。

西南科技大学本科生毕业设计

VIS系统设计是设计作品中的重中之重，本次设计体系中的VIS，不管是LOGO还是其他的衍生品，都在设计上下足功夫。尤其是LOGO的设计，经过充分的思考和创新，结合创意核心点，形成了特性独特的设计作品。

西南科技大学本科生毕业设计

3.围绕主题的系列UI和VIS设计

3.1 网站UI页面设计

小红豆网站页面按照三级页面进行分类设计，即为：首页—文章列表页—文章页；网站内容分为四个级别，即为：首页—类别—组别—文章。以首页面来说，设计排列上以时间轴为线索，分左右两栏，上下各有侧重的进行分布。左栏结构为从上而下依次为“幻灯片”“头条推荐”“文艺时间轴”，分权重的进行安排，越靠上则权重越大。右栏为信息来，用来发布网站推广信息，内容包括图片和文字等形式。在细节设计上，做了弹簧状的置顶按钮，不管你看了多少内容只要轻轻一点就可以快速的回到网站头部，这样方便了用户的观看，极具良好的用户体验。

文章列表页，左侧头部为推荐内容，用以展示优秀的同类文章，右侧也有相对应的以文字为载体的推荐形式出现。页面各个板块清楚明确，统一性较好。

网站图标、部件设计依照刚柔相济的设计理念，大部分以圆角设计为主，色调以黑白灰为主。然后结合整体要素进行统一，保证了整体设计的协调性。

3.2 网站形象LOGO设计

小红豆的形象设计记过反复修改敲定，形成了简洁明了的卡通圆形笑脸图案；色调以红豆的红色为主，佩戴黑色的眼镜部件，整体给人的感觉比较的清新爽朗，同时不乏温馨亲和力。

字体设计上结合了形式美和动感美，三个字体相互统一共同组成了一个整体，以流线型的美感进行美的加工，既有豆子的形态感也有孩子气的活泼感。极大限度的契合了“清新可人”的主题和“天生文艺范儿”的宣传语。

3.3 海报宣传物设计

海报设计的基础是对小红豆理念的提炼，在坚持“少即是多（Less is more）。”的设计理念的前提下进行设计。海报的主题图案是对小红豆宣传理念的提炼，宣传口号与其海报主体物一一对应，海报在设计上体现出简洁大方，特色鲜明的特点，具有一定的视觉冲击力和视觉感染力。

宣传册设计力求简洁，同时尽可能多的说明小红豆的设计元素。向人们展示小红豆的形象和特点。小红豆宣传册主要说明了什么是小红豆，小红豆是怎么产生的，为什么做出小红豆，小红豆的理念是什么等等一系列的问题。

西南科技大学本科生毕业设计

3.4 VIS系统小件设计

VIS系统小件设计包括：小红豆胸章、纪念纸贴、工作证、形象牌等一系列的设计元素。这些设计小件均凸显出小红豆的标志形象，以简洁明了的设计概念给人们以直观的印象，从而达到良好的宣传目的，设计小件的主题色调与小红豆的整体设计统一，为单色系设计，同时在细节上经过处理可以经受得起视觉上的推敲。

西南科技大学本科生毕业设计

结论

互联网UI设计已经日益成为商业艺术设计中的重点领域，近年来，互联网企业和品牌日益增多，互联网设计市场竞争也日益激烈，作为一名合格的经受过高等教育的艺术设计学生，更应该放宽自身设计视野，加强设计专业技能，拓展设计思维能力。小红豆的课题设计，是互联网UI作品设计的一次尝试，也是检验自我设计能力的一次重要途径。小红豆的设计从文化理念的深入，到设计概念的形成，最后到设计作品的定稿、制作和完善，每一步都是自己对艺术设计学习阶段的总结和提炼。本次课题设计的目的是激发更多的创新设计思维，发掘和开发清新文艺文化内涵，从而达到传递清新、淡雅、自然、朴实、静谧的生活方式，净化人们烦躁的心境。从而起到一定的提高人们精神生活质量的目的。

在本次的毕业设计中遇到了很多挫折，但是在这个过程中自己也学习到了很多的东西，对过去自己掌握的知识进行了一次很好的总结，这些都是宝贵的财富，这些都只有自己亲自经历了才能够体会到。在毕业设计的过程中，指导老师给予了耐心的指点，帮助我解决了设计中遇到的问题。经过本次设计，我积累了一定的设计经验，锻炼了响应的能力，使我在今后的工作学习中具有良好的应变能力、沟通力和理解力。

西南科技大学本科生毕业设计

致

谢

本次毕业设计在王小童老师的悉心指导和严格要求下完成，在此向王小童老师致以诚挚的谢意。从课题选择、方案讨论、创意丰富、到实物成品，都有着指导老师的心血和汗水。在大学四年的学习中，老师教会了我很多的技能和本领，也对我的成长付出了很多的努力，在此不胜感激。

临近毕业之际，借这个难得的机会向全体老师致以最尊敬的敬意，是你们的付出陪伴了我大学四年的学习生活，使我得以成长并取得了一定的成绩。在此同时还要感谢我的同学和我一起度过了美好的大学时光，并留下了美好的回忆。

西南科技大学本科生毕业设计

参考文献

[1]黄修源.《豆瓣流行的秘密》[M].机械工业出版社，2009-09.[2]王淮，祝文让.《打造Facebook》[M].印刷工业出版社，2013-09.[3]西门柳上，马国良，刘清华.《正在爆发的互联网革命》[M].机械工业出版社，2009-10.[4]高邦仁，王煜金.《流动的世界—奔向移动互联网时代的生活》[M].清华大学出版社，2010-01.[5]（美）科尔科（Kolko.J）.《交互设计沉思录》[M].机械工业出版社，2012-10.[6]（美）Stephen P.Anderson.《怦然心动——情感化交互设计指南》[M].人民邮电出版社，2012-3.[7]（美）温斯切克 著，崔玮 译.《网页设计心理学》[M].人民邮电出版社，2012-02.[8]（美）Jeff Johnson.《认知与设计：理解UI设计准则》[M].人民邮电出版社，2011-09.[9]（美）拉斯基 著，史元春 译.《人本界面交互式系统设计》[M].机械工业出版社，2011-01.[10]张波.《移动互联网时代的商业革命》[M].机械工业出版社，2013-02.西南科技大学本科生毕业设计

附录一

设计存在的问题：设计作品设计范围广泛，部分设计作品中的细节处理仍需反复推敲，以期达到最佳效果。

设计修改的内容：修改部分设计中欠佳的方面，对部分字体、设计元素进行调整，进一步梳理作品中的设计元素，对部分地方进行微调。