计算机教程

当前位置:3522.com > 计算机教程 > 3522.combootstrap 3 来重构企业站

3522.combootstrap 3 来重构企业站

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-06-29 18:10

  本人完全门外汉,文字编辑也不怎么过关,这文章只不过是我自己用来记录用的,希望能给相同经历的新人朋友一点启发,肯请各位路过的大神指点,我有非常多的问题。

Lofter是网易提供的轻博客服务,其中的信息类型主要有四类:即:图片、音乐、文字、视频。关于Lofer的模板设计,木偶同学在《LOFTER轻博模板设计》一文中对主要展示图片的模板的有如下设计方面的考虑,该模板通常是为了满足摄影用户,图片展示面积要够大,够爽;模板首页一屏能看多图;背景要暗,突显当前图片;边框的设计让图片更突出,或让图片更精美。通过分析和理解此设计思路,我们能够发现,其中的图片展示面积要够大,也就是我们上面提到的布局方面的考虑,而背景要暗即是我们这里要讨论的对于色彩方案的影响。

  把截图部分用自己的方式理解一次:

3522.com 1

  bootstrap 实现方法:基础代码(个人理解)一个img调入logo 口号 一个p包含中文 span 号码

下图是一个提供WordPress网站建设的公司,在它的主页上从上到下可以看到这样几部分信息:导航、Logo、口号、作品展示、选择我们的理由、联系表单、日志列表、邮件订阅、Twitter信息以及版权信息。其中的第一视觉无疑是公司的口号和作品展示,这就是此网站主页上的核心内容。因为作为一个网站建设公司来讲,直观的让客户知道你是干什么的?干的怎么样?应该是客户最想要了解的内容。那么对于核心内容,在视觉上做了哪些考虑呢?

3522.com 2

一、核心内容对于页面布局的影响

  左边是一个联系电话^-^大部分中国企业都会把电话放在这个位置,这里必须是文字形式的(看到不少公司把联系电话也做成图片的)理由是,电话,地址等信息是有非常强的复制传播需求的,所以为了用户需求或者说为了提升用户体验,我们必须把电话号码做成文字的(本人主业就是研究用户需求的营销岗位^-^)

我们可以看到,在宣传口号上设计师给wordpress这个词应用了非常大的文字尺寸,并且颜色上和其他文字区别开,使用了较深的灰色,强调本公司是建设专门以wordpress为后台的网站。在宣传口号的下方的作品展示图的尺寸很大,宽度达到了540像素,而整个的设计宽度是1000像素,在主页上这样大尺寸的展示图能够非常清晰而直接的让客户看到作品的原貌,从而对于公司的制作水准有了一个直观的印象。而这样的大尺寸的作品展示其实已经隐约的决定了整个网站的布局。想想看,在屏幕的左上方区域摆放上一个宽540像素,高460像素的矩形之后,接下来的区域该放置哪些信息,其实就像是摆放积木一样,按照重要程度挨个放置就行了。当然这并非是唯一的布局方式,但是无论何种布局方式,我们的想法都应该在功能性的考虑的范围内进行。所以创意我们可以有,但是要明白和天马行空的纯创意的区别。

要目标就是把公司网站先用bootstrap重构前端,然后结合wordpress 做后台,最后完成整个网站外观功能的全面改版。参考网址:http://fsbetter.com/

对信息的优化和提炼永远都是设计的第一步。这是百度联盟用户体验中心Banner上的一句话。在自己做网页设计的过程中,越来越对这样的概括有了切身的体会和想法。当然,这句精炼的句子其实包含了非常多的内容,我个人认为,至少包括这四个方面:一、从网站的整个诉求来讲,网页上需要放置哪些信息才能更好的实现网站的诉求?哪些信息是需要保留的?而哪些信息是需要放置在其他页面甚至干脆舍弃掉的?二、对于已经确定放置于页面的信息,如何更好的撰写文字、挑选图片才能达成功能性和视觉上美观的完美统一?三、区分信息的重要程度,哪些是重要的,需要着重表现的?而哪些是次要一些的信息?四、区分出信息的主次后,在布局、色彩、尺寸上,即在视觉上如何更好的突出和表现?

  首先是一个logo肯定是图片了,然后是口号可以用图片做也可以用文字(我为了省事还是图片吧,也可以把这二个内容做到一张图片上去更省事)

3522.com 3

  问题:定位问题,电话右边间距比正常的都大,可能要自己写css进行调整

如果上面的页面布局仍然让人觉得中规中矩的话,下面的一个酒店的主页的布局也许会让我们感觉有些新意。可以看到,此设计的背景用了大幅的食物图片,导航和主内容区只占到整个页面高度的三分之一,让背景的图片大面积的呈现出来,和上面的设计一样,这样布局的目的并非单纯是为了标新立异或者是为了视觉上的美观,而是该酒店的特色也许就在于餐饮方面,所以为了对核心内容进行突出,在布局上做了相应的考虑。再下面的一张餐厅也在主视觉部分强调了美味的食物,但两者采用了完全不同的布局方式,虽然各自有信息架构方面的独特考虑,但是也不妨将它们看作同样一种核心内容的两种不同的创意方式。

本文由3522.com发布于计算机教程,转载请注明出处:3522.combootstrap 3 来重构企业站

关键词: 3522.com

上一篇:java lucene2.0

下一篇:没有了