Web端界面设计与实现——以某理财网站页面设计为例

目前，UI 设计是当今互联网网站设计中的重要一环。用户对于互联网上的Web 网站的要求越来越偏向高质量、界面美观、操作友好以及让人一目了然，并且仅凭设计便可引导用户进行正确的操作已经是基础要求。因此，建立一套完整的线上P2P理财Web 网页，将有助于满足目标客户群的消费需求，提高消费者操作便利性，进而优化产业结构、资金的流通，降低流通难度，减少交易的成本，能够更方便快捷、经济地与客户进行沟通。

1 设计风格

该理财网站的Web 网页的设计项目在设计之初，根据用户需求，确定整个项目的主色调为橘色，橘色的气质为热情、温暖，并且橙红色可以勾起人的购买欲。界面风格决定采用抽象扁平化的设计，这是目前设计潮流趋势所向，再者P2P 理财类的设计，信息才是主体，若是以样式精美的拟物化风格进行设计容易使客户“分心”，于是，信息的版式设计便是重中之重，将平面设计艺术中的版式融入设计当中，这样既能突出主次，也能保证整个版面的干净整齐，带给人一种视觉上的舒适感。理财网站Web 端设计将以从实用和易用的角度出发，呈现给用户舒适、方便、美观交互体验。

2 品牌形象LOGO 设计

LOGO 即商标，是logotype 的缩写，它的作用是通过形象的图案让消费者记住公司主体和品牌文化，也就是说是一种“标识”，是公司或者项目抽象之后的代表，其重要性不言而喻。

LOGO 在设计之时参考了市面上比较成功的理财网站，设计出了三个方案：方案一，纯图案。方案二，英文缩写加图案。方案三，图案加中文字样。并最终选择了方案一。

方案一的设计方面，图案使用了产品主色调橙红色为主，白色、浅灰为辅色，使用了古代金钱图案为基础，在左方用规则的圆切了一个开口，形成了一个“C”的图案，缺了一边有个隐含的含义是“缺钱找我们”。最后用个圆圈住了金钱，表示财不外泄。而文字方面使用了书法体，苍劲有力的书法体与古代金钱的气质相符，颜色选择了深灰色。效果如图1 所示。

图1 网站logo

3 Web 端页面结构设计

在网页的原型设计方面，根据用户需求，梳理网页逻辑，画出了草稿，再根据草稿在Photoshop中用钢笔工具、形状工具等勾画出原型图，并使用Axure 制作出高保真原型图，使用软件工程中的原型法进行页面开发，能够在开发初期，获取和明确用户需求，保证开发工作的顺利进行。

网页的页面方面远比App 少得多，所以逻辑也比较简单明确，页面跳转部分比较少，大多数内容可以在一个页面中进行展示。将网站分为四个主页面——首页、我要理财、安全保障、关于我们。“首页”与“我要理财”是需要重点进行设计的页面，“首页”主要作用是汇总、引导以及跳转，展现的信息是详细内容的概述。于是将“首页”分为7 个部分，分别是头部导航栏、广告轮播banner、本站的优势、投标种类、新闻动态、合作网站以及页脚。而“我要理财”则分为头部导航栏、新手福利、M 计划、散标投资、债权转让以及页脚。“安全保障”以及“关于我们”则是公司相关信息的呈现。

4 Web 端页面设计与实现

4.1 导航栏的设计

导航栏是在banner 上边的一排水平导航按钮，它的作用是链接站点内各个页面。导航栏的左边放置了LOGO，右边则是导航按钮排列。这样设计的原因是因为人的阅读习惯是从左往右，那么作为重要的标识，LOGO 自然是放在了左边。而右边导航按钮的文字大小出于美观方面的思考，所以选择了14px 这个大小，因为小的字会显得比较精美，按钮底部放置了一块宽70 高10px 的一块长方形方块，平时是不显示的，而在鼠标悬停到上面的时候则会出现，同时字体也会随之变色。

在网页前端设计中，导航栏的实现是先用一个大DIV 将内容包在宽1200px 的容器当中，然后用一个DIV 装LOGO，加上左浮动的样式float：left 即可让其浮在左边，另一边选择了HTML 无序列表ul li+A 标签来写。而鼠标悬停的效果则使用了hover来实现。

4.2 轮播banner 的设计与实现

这一模块的设计主要还是以banner 的内容为主，整体设计方面自然是选择了流行的通栏设计，显得更有冲击力，广告的作用会更大，另外在此处特意添加了一个透明浮动窗口，以此来展示了一些信息来吸引客户在本站进行注册、投资，此处的“注册”按钮是腰圆形状的按钮，主色调为橘色。

在网页前端设计中，套用了Javascript 使得banner 可以轮播，同时透明浮动窗口使用position：relative 样式将其定位在设计图上的位置，按钮也同样使用定位来调整位置，并用hover实现鼠标悬停效果。

4.3 首页模块设计

模块的标题采用了中文加英文的组合，英文在这里为中文的装饰，这个组合是平面设计中的一种常见设计方式，小字体显精致，而大英文做装饰则算是撑大了标题所占面积，显得更醒目，从而达到不失精致而醒目的效果。

“我们的优势”模块采用了上图下文的排列对齐方式，图案采用剪影加上深色背影，使其富有层次感。该模块的背景使用了一个波纹过渡，从白色过渡到灰色，是为了将面板底色变为浅灰色，使得在设计“投标种类”模块时可以分清白色的卡片和背景。

“投标种类”模块，为了体现信息的丰富，呈现了4 张卡片，卡片上的图案选择了卡通风格，这种扁平卡通风格能够更加突出信息的重要性。右上方的“更多”按钮是跳转到“我要理财”页面的一个入口。

此处使用图片来进行布局，这样布局的缺点是服务器需要承受负荷比较大，加载速度慢，而优势是兼容性好，代码简练，于是“我们的优势”模块便使用DIV 实现居中，在CSS 样式中将此DIV 背景设为在PS 中切好的图片。而“投标种类”每个卡片需要切两张图，分别是普通状态与鼠标悬停状态，再用四个DIV 装着四张普通状态的图片，再用hover 实现悬停效果。

“新闻动态”模块分为上下两个小模块，上部分是常见的平面设计中的排版，一边是图片配文字，另一边是纯文字，为了不显得呆板，于是右边的日期做了放大、变化颜色的效果，凸显趣味性。下部分则使用纯图片加黑色新闻标题背景的形式来显示新闻标题，右边使用了一张较大的图片，提高了版面的跳跃率。

“合作伙伴”模块主要呈现与公司合作企业的LOGO 图片，让用户信赖公司发展实力。网站整体主色调选用了刺激消费的橘色而不是气质中可以体现安全可靠的蓝色，因为传达安全可靠的信息可以在模块中通过图文设计来体现，比如“合作伙伴”以及“法律保障”的页面。

页脚承担的是一个展示网站合法信息、二级页面跳转、全站导航以及其他信息的地方。颜色选择了白色，因为若是选择深色系则与整个网站风格不符。左边是全站导航，在中间几个二维码占据位置，在右边展示了联系电话，颜色选择橘色的邻近色黄色，底部则是网站注册信息。

4.4 “我要理财”页面的设计

此页面是功能型页面，自然是要以实用为主，这里背景颜色选用了浅灰色，以大标题区分区域，以白色为底的圆角矩形将信息框起，让人一目了然。关键文字、按钮部分选择了橘色。设计中将卡片内的重要信息放大，这里放大的内容是计划的名称、预期年利率、计划时长。将重要信息字体放大有两个原因，第一个原因，经研究，来P2P 理财的用户最在意是受益，其次安全与否。将受益放大，并且字体选择了橘色，这样可以得到一种冲击眼球的效果，这是心理上的一种暗示。第二个原因是放大某个信息，整个版面才会有重点，有主有次，版面才会和谐，若全是小字体，用户第一眼会不知道放在何处，并且会对大量文字产生厌恶感。

文字信息的排列尤其重要，本模板并未插入图片，因为加上图片之后会挤压文字部分，文字部分会显得拥挤，而且图片会抢掉用户的视线，使得用户不能关注重要信息。

在“散标投资”模块中，设置了一个筛选模块，这样有助于用户更好根据自己的需要找到自己想要的标。“债权转让”模块其主要设计风格和“新手福利”“M 计划”模块相似，主要区别还是在文字上，突出的重点有所不同。

4.5 “安全保障”页面设计

“安全保障”页面主要展示的是本理财网站自身的水平、合作伙伴的实力、投资商的来源、以及风控团队的能力，但是以文字为主的页面设计会显得呆板、单调、枯燥，那么如何使得页面鲜活起来是设计师需要思考的问题。于是将此页面分为四个小版块，每个模块论述一个点，搭配的图片选择了与网站气质相符的卡通商务风格，这种风格在首页的设计中也有使用，保持了网站整体设计风格的一致性。

4.6 “联系我们”页面设计

“联系我们”的设计主要讲究左右对称，依然是中文加英文的大标题，页面中央放置了地图，上下两边则放入了相应的信息，联系方式则分为两行现实，分别为公司地址、商务合作，小字部分中标明了公司的详细信息，分类使得这些文字信息变得一目了然。

5 结语

理财Web 网站界面设计中运用到了艺术设计、软件工程等学科知识，结合了各类软件进行网页的原型——效果图——Html 网页的设计。在开发前期规划了大体框架，研究了市面上的竞品，对网站气质、配色、风格进行确定，这样才可形成独特特色与风格，具有市场竞争力。在交互设计中，从用户的角度出发，网页中文字、按钮、图片的摆放，版面、导航栏、页脚、浮动窗口的设计，都需要首先考虑用户的学习成本，一个清晰的、完整的网页逻辑，可以让用户的体验大幅度提升，如图2 所示。

图2 网页设计效果展示