前端开发的基本原则

概述

UI设计的目的是为了给用户提供友好的功能界面、简单易用的软件交互。在通常情况下,内容本身与加载速度比界面是否美观更为重要。如果是网页类的UI设计最终要被按照W3C规范用html语言+CSS所实现。所以除设计风格外,需综合考虑多种因素,如尺寸、加载速度、兼容性、自适应性、Html化易实现、JS效果易实现,等等。

基本原则及注意项

尺寸

以下尺寸为常用/通用设计及实施尺寸:

web类:

  1. 1920×1080像素,1140像素内容器(container,以现阶段较流行的web前端框架如Bootstrap其默认官方配置的内容器尺寸为1140px)

手机类:

  1. 375×812像素(iPhoneX)
  2. 414×896像素(iPhoneXR)

格式

  1. 大尺寸图片如slider轮播图、新闻缩略图等,使用jpg格式,无特别原因勿使用png
  2. icon图形使用字体库或svg
  3. 小尺寸icon图形如需要使用图片,使用png格式(为透明或视网膜屏高精度)
  4. logo商标使用svg或png格式

图片

在项目开发中如引入比较成熟的第三方前端框架,如流行的Vant或Bootstrap,其效率与兼容性基本上都能得到保障。但因为软件物料的不规范或过于随意,将会影响加载与执行效率。因此需遵循一些基本原则:

  1. 大尺寸图片如slider轮播图、新闻缩略图等,最大宽度勿超过1920像素。非特殊原因勿超过实际显示尺寸。
  2. 小尺寸icon如需兼容视网膜屏,最大图片倍数不起过x3
  3. 通常jpg格式图片80%质量即可满足使用要求,勿使用未进行优化的原始99%精度的jpg
  4. png有多种格式可供优化
  5. ui设计中的修饰效果,如阴影、渐变,尽可能通过CSS实现

 2,492 total views,  3 views today

Revisions

No comments yet.

发表评论