我的主页我做主！北邮校园网主页设计大赛网络投票开始啦！

码头发布

北京邮电大学校园网主页设计大赛第一阶段报名阶段的工作已经结束，共有40组作品投稿参赛。现在活动进入到第二阶段——网络投票阶段，快来给自己心仪的作品投票吧！！

投票规则

1.投票时间：2017年12月8日——2017年12月13日。

2.投票方式：按照文末提示进行操作；每人以QQ号或微信号为限，每个号码可投一次；每次投票限选不超过5个参赛作品。

3. 禁止恶意刷票，一经发现立即取消比赛资格。

作品展示

1号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

01

设计说明

根据北邮悠久的建校历史和走在前沿的学术创新特色，打造出时代的结合和碰撞效果。结合北邮美景图以及VI色共同打造“科技北邮”之感，在底部，对北邮的风景做“水墨画”处理，打造具有古老韵味的效果，充分体现北邮学术特色。整理网页信息架构，对其进行细致的分类及整合，网页采用锚点式跳转，保证用户快速跳到对应位置；在内容展示方面，采用流畅快速的标签式切换方式，利用有限空间增大信息量。网页整体简洁美观，用户体验优良。

2号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

02

设计说明

设计创意主要来源于现在网页非常流行的左右分屏式设计，校徽做了适当调整，将扁平logo立体化，给人新鲜、有趣的感受。主体采用深红色，沉稳大气，内敛低调，如北邮人给社会的感觉一般。局部导航采用九宫格搭配几何图案，富有变化，增加网站的趣味性、互动感。下部版权部分分类排版，简单大方，又富有设计感。

3号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

03

设计说明

设计创意主要来源于现在网页非常流行的左右分屏式设计，校徽做了适当调整，将扁平logo立体化，给人新鲜、有趣的感受。主体采用深红色，沉稳大气，内敛低调，如北邮人给社会的感觉一般。局部导航采用九张点击就能变换大小、左右移动的北邮手绘、剪影图片，富有变化，增加网站的趣味性、互动感。下部版权部分分类排版，简单大方，又富有设计感。

4号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

04

设计说明

设计的特色是 “版面美观”、“红色主题”、“技术先进”和“简约实用”；页面布局结构合理，配色考究，符合现代美学；红色主题体现学生朝气蓬勃的精神风貌和学校厚重的文化底蕴；技术先进，页面支持灵活适配和动态交互；功能模块简单分明，更能提升用户体验。

5号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

05

设计说明

设计直观上大方美观，不局限于一点，正好体现出了信息流动的特色。特大的banner能够让用户产生继续浏览下去的愿望。大块的标题更加醒目，能够将主要内容快速传递给用户。浮于图片之上的导航具有一些隐性的美感，比较符合现代审美，让用户更加感兴趣。

6号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

06

设计说明

北邮是一所依托于信息技术发展的综合类学校，传统的网站设计较为简洁，但是不能很好的突出北邮的文化。本作品立足于北邮信息特色，突出“信息蓝”，同时又加以分区分块展示，力求让整个界面达到美感与简洁共存。让用户看到开头产生继续浏览下去的意愿是本次设计的主要目的。

7号作品

↑↑↑点击查看大图↑↑↑

序号

7

设计说明

本方案以简洁明快的设计风格为主调，采用信息板块平铺的方式进行设计。页面采用蓝色、明黄色进行设计，整体简洁大方美观、板块布局合理，主次分明，突出北京邮电大学青春活力的校园风貌、严谨的办学特色及专业特色。

8号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

08

设计说明

设计主要体现在简洁性、展示性和易用性。整个页面风格简约，分为上下两部分，上半部分展示北邮要事，凸显校风，同时整合导航功能；下半部分六个板块轮播，方便信息查询。同时底部采用北邮手绘风景，表面按各部功能进行色块区分，清新朝气而明了。

9号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

09

设计说明

《指尖下的北邮》：当今时代是信息和互联网的时代，手指轻轻滑动，信息便能交流传递；而北邮人正是通过手指在键盘上翩翩起舞而实现信息的联通和传递。网页整体的设计和排版灵感来源于键盘和摩尔斯电码，网页信息主要分为八个板块（按钮），其中“北邮概况”等板块的设计源于摩尔斯电码。画面整体颜色比较中性，具有现代感，白色的加入使得画面更具有活力。设计结合北邮在信息领域的特色发展，是对“信息黄埔”的抽象体现。

10号作品

↑↑↑点击查看大图↑↑↑

序号

10

设计说明

主体以蓝色调为主，旨在体现出北邮氛围的厚重与沉稳。中间的三角形结构，将“信息门户”等常用登录窗口隐藏，在需要时下拉出，给用户简洁明了的感受。以照片作为背景，并在照片阴影处将各导航之后的界面展现出来，使用户在运用时能够以最快的速度得到需要的信息。该作品以简洁大方的风格，在考虑校内校外各用户的基础上，对界面进行优化，展现出北邮人积极向上的精神风貌。

11号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

11

设计说明

作品将现代的设计元素和北邮的传统元素结合起来。除了注重美观更注重用户体验。精心制作的网页图标和合理的位置设计，让用户在享受到便捷的网页浏览的同时，也能通过各种设计元素感受到北邮的文化气息。

12号作品

↑↑↑点击查看大图↑↑↑

序号

12

设计说明

网页以不透明度较低的蓝色和白色为主色调，凸显北邮求真务实、低调严谨的学风，并且不会给人带来视觉疲劳感。网页的背景采用随时间变换的方式，强调校训。网页水平和垂直导航栏分别提供不同的链接，满足不同用户访问的需要。

13号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

13

设计说明

采用下拉式版面，丰富主页内容，减少信息检索步骤。大面积采用高明低纯的色块，使网页简洁大方。内容架构方面，对内容进行了适度的调整。如将关注度更高的“教育就业”、“科学研究”等板块置顶，新增“校园生活”板块以展现北邮学子风采，体现“以人为本”的设计理念。

14号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

14

设计说明

全站信息包括最顶端针对不同用户设置的用户模式、搜索、中英切换和常用信息。导航条一直悬浮在最上层。网页首图作为北邮风光的展示。下拉的内容用校训和标题分割。背景是北邮风光插画。主色使用代表着科技的蓝色。

15号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

15

设计说明

本作品主要由以下几个部分组成：本校LOGO、顶部两处菜单栏、搜索栏、饼图状菜单栏。本作品创意之处在于饼图状菜单栏，设想中的效果为鼠标移动至上方会有拓展框进一步展示详细选项。

16号作品

↑↑↑点击查看大图↑↑↑

序号

16

设计说明

将信息浓缩于一页网页之中，简洁排版使网页的官方感和格调顿升，也体现了北邮严谨简洁的作风。科技感强，分布均匀，配色选择了北邮蓝，周正知性。校门与学子的背影，唤起北邮人的归属感，无关风月，有关北邮。

17号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

17

设计说明

北京邮电大学是以信息技术见长，以互联网为特色的高等院校，学风严谨，勇于创新。而为了体现学校的特色，进行了以扁平化和透明化为特色的学校网页设计。从主页面到子级页面风格持续呼应，组成了一套完整的页面设计。

18号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

18

设计说明

针对不同用户人群分类：为校内用户提供辨识度高的快速通道；为校外访客全面展示北邮校园风采。视觉上融合北邮特色，并根据北邮校园风景提取四季颜色作为主页的辅助色彩，依季节改变，陪北邮人走过春夏秋冬。

19号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

19

设计说明

设计关键词：科技、创新、历史。首页-科技创新：与文字契合且充满科技感的配图。轮播图文展现北邮最新科技成果与学术影响、校园活动、校园风景；下拉页-悠久历史：时间流横向展示丰富校园历史，横向交互充满新意；创新与历史的交融，突出北邮历来不变的严谨学术精神和不凡的学术造诣。

20号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

20

设计说明

功能性和展示性相结合：提供常用链接和功能的快捷入口，全面展示教育教学成果，给不同用户提供身份入口；结构清晰、布局合理：美观、易扩充，可用性较强；交互实用创新：注重微交互动效；风格简洁扁平科技：选取北邮蓝为主色，视觉元素统一。

21号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

21

设计说明

色彩丰富，美观轻盈，清新活泼，布局合理，重点突出，板块全面；轮播图为手绘北邮风貌，展示校园美景；导航清晰，页面简洁，便捷入口醒目突出，便于快捷地找到所需要的信息；以校园资讯为重，同时突出办学特色、专业特色等重点内容。

22号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

22

设计说明

整体设计上追求简洁和扁平化。细节上保持页面色调和设计语言的统一并灵活使用了动画。侧边导航栏设计和始终存在的主导航栏使得整体结构明晰。另外，根据不同平台的特点设计了适配其显示的网页。

23号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

23

设计说明

主页主体是“北邮-冬”，采用四季的展示方式来体现北邮的人文关怀，同时向北邮人与校外人士展示北邮校内景色与主要建筑，其延伸还有春夏秋三个主题。目标是做出一版简洁大方、用户使用体验优良，既能够体现北邮特色，又体现人文关怀的北邮主页。为此了解了北邮人日常使用北邮校园主页的主要目的（信息门户入口等）以及校外人士浏览北邮主页的目的（考生报考、老师应聘等），以此来决定网站主页的主要功能。

24号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

24

设计说明

以人为本，以人立校。网站设计从人性化的角度切入，剖析不同角色对校园网主页的需求。或是探索理想、或是攫取信息、或是猎奇逛逛。三校区天气提醒、优秀宣传片展播、学校要闻。简单的、纯粹的、低调的，才是北邮的。

25号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

25

设计说明

网站定位：浏览型网站；网站目标：本网站旨在利用大图展示北京邮电大学的形象。

26号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

26

设计说明

网站定位：入口型网站；网站目标：本网站旨在满足考生、本校师生以及相关人员的信息/入口需求，帮助他们快速找到需要的信息和网站入口。

27号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

27

设计说明

本页面对现有主页的信息层级进行了组织和重组，从可用性原则出发，并进行了多次可用性测试，确保了网页在各浏览器的上流畅体验，秉持动静结合，视觉效果及交互至上的原则，整体页面远看简洁大气，近看不失精致。

28号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

28

设计说明

以传统的北邮科技蓝为底色展开设计，彰显北邮主特色。并将整个北邮官网的信息架构进行重新搭建，使各个层级的逻辑结构更加紧密。作为学校官网，最主要的作用是展示学校的风采与内涵。官网整体风格为简约科技，同时具有简单的交互动效，给网站增添一份生机。

29号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

29

设计说明

设计风格简约大方，主要采用大图加透明遮罩的方式，一共设计了四类轮播图：新闻底图；浅色地图设计；深色地图设计；动图设计方案。通过轮播图的自动切换，展现校园美景，减轻视觉疲劳感。首页内容对信息架构和导航进行了再设计，突出常用入口。站点地图的设计便于师生用户快捷找到需要的链接。

30号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

30

设计说明

设计风格简约大方，主要采用大图加透明遮罩的方式，一共设计了四类轮播图：新闻底图；浅色地图设计；深色地图设计；动图设计方案。通过轮播图的自动切换，展现校园美景，减轻视觉疲劳感。首页内容对信息架构和导航进行了再设计，突出常用入口。突出主页公告类、新闻类和科研动态类内容，清晰明了，方便用户浏览和操作。

31号作品

↑↑↑点击查看大图↑↑↑

序号

31

设计说明

作品本着简洁清新的风格，将北邮春夏秋冬的景色铺于背景，体现四季交替和北邮学子生生不息的理念。本设计将主要栏目悬浮于背景图片之上，展现了空间层次感，交互框位于屏幕上方以及右侧，便于用户识别、操作及阅读。

32号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

32

设计说明

该网站主要面向校外人士和校内师生，借鉴移动交互模式，采用整屏换页与滚动换页相结合，页面中的微交互增加了用户体验；同时选择了鸿雁这一代表意向，呼应了logo，又有传邮万里的寓意。

33号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

33

设计说明

将北邮的特征概括为科技、新锐、低调。以北邮蓝为中心的色彩符合“科技深水区”的意向。扁平化设计在国内学校官网中不落俗套，体现了北邮的“新”。同时将“减法”的理念贯穿始终，较少的文字和大面积色块体现出北邮人的内敛，并且更有助于用户找到目标信息。

34号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

34

设计说明

该主页沿用理性沉稳的蓝色为主色调，采用当前主流的扁平化设计，对网站导航栏目进行了优化整合，新增学术信息板块，方便学校师生查看相关资讯。同时，在底部放置公共服务入口，为广大师生提供方便快捷的服务。

35号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

35

设计说明

设计的风格简约而符合现代审美趋势，严谨简约而不过于活泼。以饱和度、明度较低的蓝色和灰色、白色作为主题色，针对不同用户进行了信息架构设计，组织科学合理，方便用户找到目标信息。

36号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

36

设计说明

本设计主要在信息展示上进行重新布局，考虑到原有用户的操作习惯，并未改变信息路径。背景为大屏视频播放，更具科技感和沉浸感。新闻公告采用邮件形状承载，体现北邮信息传递的信念，同时，该形状提取于“邮电”两字交集的“由”字。

37号作品

↑↑↑点击查看大图↑↑↑

序号

37

设计说明

对主页进行全新设计，web版将一屏改为多屏，内容呈现更加清晰丰富。以白色、北邮蓝为主，新加黄色辅助，更清新、活泼。手机端缩减了部分功能，减少负担，浏览更便捷，与网页风格一致，移动端内容更精练。

38号作品

↑↑↑点击查看大图↑↑↑

序号

38

设计说明

主要优化了现有的网站设计，将背景图遮挡面积缩小，同一色调为深色，北邮蓝为主，白字更加亮眼简洁。缩减不必要的板块及新闻内容，选中时显示新闻摘要，更易阅读，节省空间。

39号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

39

设计说明

“北邮：简洁朴素的表面下丰富的内里”——打开主页先是简洁的第一画面，由导航和轮播图组成，轮播图中的视频页更全面展现学校风貌；向下浏览时，导航侧缩成北邮logo让出留白，背景是响应鼠标移动的动画，鼠标每经过一个三角形时三角形旋转一周露出底下渐变的彩色图层，在浏览信息的同时增添趣味性。

40号作品

↑↑↑上下滑动或点击查看全图↑↑↑

序号

40

设计说明

技术上自适应Chrome, firefox, safari, opera, safari mobile, IE Mobile，IE9+，Android2.3+的浏览器，以及在移动端实现响应式布局；设计上主题颜色沉稳而不低调，奢华而不张扬，体现北邮厚德 博学 敬业 乐群的校训。象征北邮学子对追求理想的热忱、奋进以及团结向上的思想。

投票方法

赶快动动你的手指头，

选出你最喜欢的校园主页吧！