网站开发 APP开发 小程序开发 SEO优化 公司新闻

网站在前端开发设计过程中怎样去优化呢?

2018-06-05 10:18:37

  在互联网时代,网站就像一个公司的名片,拥有一个优秀的网站可以帮助企业树立良好的形象,是企业进行自我宣传的工具。

  但是在网站设计与建站的过程中除了要重视网站内容的丰富性和灵活性,还要保证网站设计的视觉效果,这会给网友带来全新的视觉体验,从而对网站的传播起到事半功倍的作用。

  那么网站在前端开发设计过程中,怎样去优化呢?

  网站品牌

  (1)logo。选择一个带有很棒的 logo 的网站或者博客是一个瞬间获取信任感的好方法。

  (2)favicon。上传一个支持 retina 屏幕的 favicon(在浏览器标签上显示的正方形小图标)。大部分网站的 favicon 都是 16x16 像素的,在 retina 屏幕会显得模糊。如果使用 X-Icon Editor 生成 64x64 像素大小的 favicon,屏幕会显得清晰一点。

  (3)色彩使用。建议最多使用 2-3 种颜色。包括背景色、文字点击前、点击时、点击后鼠标或触碰前后执行的颜色效果;建议不要使用纯黑色(#000000)。在网上使用纯黑色看起来不合适。实际上,黑色应该总是作为其它颜色的深色阴影。

  网页排版

  (1)字体样式使用

  最多使用2-3种字体

  使用更多字体会显得杂乱,并且减慢加载时间。

  (2)根元素字体大小

  设置body的字体大小最小为16px,更小的字体在大屏幕中不方便阅读,如果是移动端页面可以考虑的最小值为 12px。

  (3)字体图标

  选择一种自定义图标字体,比如 Font Awesome,来代替图片和其它一些元素;比如社交媒体 logo、导航按钮、交互图形等,图标字体的加载速度更快,可以任意缩放,并且可以随意更改图标颜色。

  用户界面

  (1) 添加鼠标悬停 (hover) 和鼠标点击 (active) 状态的样式给链接、按钮、输入框和文字区域。例如选择在鼠标悬停时让按钮颜色变亮,那你也应该对于链接和输入框的边框给出同样的样式。

  ​(2)保持表单样式的一致性。所有的文本区域和输入框都应该有相同的样式。包括相同的边框颜色、背景颜色、悬停状态、点击状态、占位符文字、点击状态文字等。

  (3)链接的颜色。改变已经点击过的,让用户知道他们已经去过那个页面。

  (4)一旦拥有了自己的 logo、颜色、排版、布局和图像大小,则建立一个统一的风格指南。

  用户体验

  (1)微交互。在按钮和其它表单域元素使用微交互 。比如,点击上传按钮之后,提示文字可以变为 “正在上传” 或者 “处理中”。

  (2)标题。使用标题、副标题、头段落、列表、表格标题让你的内容更容易被检索。大部分人在浏览网页前,都会先检索一遍全文,再决定是否阅读。

  (3)占位符文字。添加描述性的占位符文字到你的表单、输入框和下拉菜单。如果你想要让浏览者用某种特定方式来填写表单,你应该指引他怎么做。

  (4)表单验证。往表单添加表单验证,让用户在提交表单时可以清楚地知道哪些部分出现填写错误。