UI设计师必备的Web设计尺寸总结

网页宽度为1920高度不限,有效可视区:950px~1200px宽度,具体尺寸根据项目,客户要求以及用户群决定。

首屏高约为700-750PX主体内容区域1200PX。

文档建立:文件宽度为1920PX高度不限,RGB颜色模式,分辨率72

中文常用字体:宋体-字体样式(无)、微软雅黑-字体样式(WindowsLCD)、苹方(MAC)

英文常用字体:TimesNewRoman、Arial、sans

(1)中文字常用字号:

导航文字大小:14px、16px、18px、20px;

正文内容:12px、14px;

标题:22px、24px、26px、28px、30px;

辅助信息:12px、14px;

(2)英文字常用字号:

标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息);

(3)段落字体格式:

注意:网站的首页只能有一个。

(2)二级页面:从首页点击进入之后的页面叫做二级页面。

(3)三级页面:从二级页面点击进入的页面。

(1)头部区域-----top或header

(2)主视觉区----banner

展示公司品牌形象、新品宣传、主题活动等轮播大图

(3)主要内容区---main

新闻动态、产品与服务、公司介绍等

(4)底部信息区---footer

(1)来自于LOGO的颜色;

(2)来自于环境的颜色;

(4)来自于产品的颜色;

(5)公式:随意选择四个颜色,调整四个颜色的明度和直线色相;

(6)选择一个符合你产品的任意颜色图片,然后在这个图片中提出来四种颜色,来作为网页的主色调(服装,饰品、化妆品类居多)。

(1)高清大图,图片不能有水印;

(2)有图片的位置最好配有文字说明不要大篇幅的图片摆放;

(3)文字排版,标点符号不能在一行的第一个,不要一个文字为独立的一行;

(4)如果色块中有文字,文字必须在色块的中心,不能上或者下留有太多空白空间;

(5)如果箭头朝下必须有下拉菜单,如果下拉菜单是合起的状态,箭头朝右;

(6)banner不能是现成的图片,需要进行合成和设计,也需要有文字的极差关系和对比;

(7)产品分类中必须有不同的产品体现;

(8)在每一个板块中都必须体现明显的连接;

(9)在网页设计中不要有重复图片,每个图片必须有一个部分是完整的;

(10)图片素材不要直接用设计好的图片;

(11)在板块中不要有纯图片的设计,一定有文字解释,有链接;

THE END
1.设计稿间距如何设定?UI设计过程中每个设计师或多或少会有一些经验数值,设计不仅仅是理性的,也是感性的,灵活点,切不可生搬硬套。在实际使用8为系数,某些情况下我们会发现间距过大,我们也会采用2px/4px网格去进行设计。基数越小,元素之间距离越小;基数越大,页面的留白越多。在设计时,我们按照间距规范合理设定即可。 https://zhuanlan.zhihu.com/p/446755980
2.UI设计进阶干货!盒模型间距设计指南优设网然而尽管拿到这些优秀的设计指导和组件库,依然不一定能够输出非常有品质的设计,仔细研究发现,其中非常重要的一个原因,我们认为是:不同 level 的设计师对“间距”的把握程度不同,拼凑组件输出的界面信息层次和整体性不好。 PART 1:UI 间距基本原理 资深UI 设计师凭借经验和感觉能快速的搭建高质量的模块和页面,而https://www.uisdc.com/box-model-spacing
3.杭州UI设计学习间距的属性腾讯云开发者社区1.间距是多少? 间距是指界面元素之间的距离,可以是文本本身、图片、组件、模块之间的间距,也可以是界面两边的安全距离(比如网页宽度为1920px,内容区域为1400px,那么两边的安全距离为260px)。 作为UI设计师,设计界面中的每一个元素都需要兼顾上、下、左、右、相邻元素的属性来合理调整间距,利用间距的规则来组织界面https://cloud.tencent.com/developer/news/994120
4.关于间距的知识点分享视觉设计日志DTOP什么是间距? 间距指的是界面各元素彼此相隔的距离,可以是文字自身的行距、与图片、与组件、与模块的间距,或是界面两侧的安全距离(如网页的宽度为1920px,内容区为1400px,那么安全距离为两侧各260px)等。 作为UI设计师,在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距,利用各间https://dtop.powereasy.net/rz/sjsj/content_23695
5.UI设计:网格ui间距比例UI设计:网格 一般来说,网格分为4倍网格和8倍网格。而这两种规范在实际设计中是可以混合使用的。在这里,我们以8倍网格作为示例,来对下图进行规范操作。 使用的软件为Figma 我们可以看到,这是一个占了四个栅格的大盒子。其中又包含了两个按钮。我们查看按钮的间距。https://blog.csdn.net/weixin_62428841/article/details/123319104
6.图片网页设计常用的字体大小行距间距规范ui设计师吧现在很多设计师最开始做的是APP设计,最后应工作需要会做些网页相关的页面,直接采用APP图文的排版规则套用在网站上,因为终端设备,使用场景发生变化,会显得很不合适。其实这里面就是几个规则的事,今天就给大家分享,记住这几个规则,即使你从来没做过网页设计,也会做出符合业界规范,排版好看的网站了。行间距1倍 1.2倍https://tieba.baidu.com/p/6330683442
7.网页UI设计规范超全整理网页UI 设计是指针对网页界面的视觉设计和交互设计的整体规划和实现,通过有效的设计来提高网站的用户体验和用户满意度。网页 UI 设计如今得到了越来越多的重视,也逐渐形成了约定俗成的网页设计规范。在网页 UI 设计中,遵循一定的规范能够让网页界面更加清晰且易于理解,本文为大家整理了一些常见的网页设计规范,希望能够https://js.design/special/article/design-specification.html
8.设计师要掌握的UI设计技巧(二):排版篇大家好,我是Clippp,今天为大家分享的是「UI基础系列2-排版篇」。在第一篇中,我们拆解了标题的字号、样式、行高、粗细应该如何设计 最近有读者催更?还想看「UI基础系列」,接下来我们开始分享第二部分:页面排版。 排版中很重要的两个因素是对齐和间距。对齐让页面内容有序且合理,间距有助于拉开页面中各个元素的空https://www.niaogebiji.com/article-98929-1.html
9.UI界面设计网页设计的版式设计法则注意段落右侧的起伏形状,在一个句子中标点符号之间使用单个空格,以避免形状和角度不美观。 间距的重要性。越是间距接近的元素,读者就会假设在不同的信息块之间存在这一种关系。 最后推荐 优秀设计师的作品排版 : 如下图:来自国际化设计师MIKE的设计作品 UI界面设计、网页设计的版式设计法则https://www.cdcxhl.com/news/216442.html
10.网页设计规范怎么做?记住这4点就够了网页设计也属于UI设计范畴,是近几年的大热门。随着互联网时代的到来,网页UI设计也开始被越来越多的企业重视,正是如此,UI设计也可以说是目前设计界中薪资最高的存在。 那么对于目前学习网页设计的小伙伴而言,如何才能做好网页设计,拿到这份高薪呢?关于这一点,墨刀认为做好UI设计的核心是明确网页设计规范,今天就来和https://modao.cc/design/web-design-standards.html
11.2024网页UI设计规范,新手科普!在网页UI设计规范中,布局是一个非常重要的方面。一个良好的布局可以使用户轻松地找到所需的信息,并且有助于页面的整体美观。规范中通常会规定网页的整体结构,如顶部导航栏、侧边栏、内容区域等的位置和大小,以及它们之间的间距和比例。 另外,颜色也是网页UI设计规范中需要考虑的重要因素之一。规范中会规定网页的主题色https://pixso.cn/designskills/2024-website-ui-specification/
12.七个网页界面ui设计细节你掌握了吗(案例图文讲解)素马主张任何高大上的产品概念设计最终落地都化解为版式与图片。随着用户对产品使用的体验要求越来越高,新锐的版式加上精美的图片,还需要加上独特的动效设计(前端制作工艺)才行。那么,除了网页设计三大块版式、图片、动效外,我们这些看似搬砖,每天做细节设计的ui设计师,是否有大的研究和作为呢。今天分享的这篇文章,主https://www.sumaarts.com/share/676.html