web网页手机app设计规范看不懂。。

新建ps文件时,宽度为1920、单位为像素、颜色模式为rgb、高度自定义:

一、网页设计尺寸

制作网页时我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。但并不代表我们可以在整个画布上作图。

网页的布局主要有两种:左右型布局和居中型布局。布局的不一致,使可设计的空间也不相同。

左右结构型

1、左右布局,灵活性强,UI的限制小;

2、左边通栏为导航栏,宽度没有具体的限时,可以根据实际情况进行调整;

3、右侧为内容板块范围,是网站内容展示区域。

居中型

4、居中布局,中间的黄色部分为有效的显示区域,用于网站内容的展示。

5、换句话说,两边均为留白,没有实际用途,只是为了适配而存在。

6、内容限时区域在好控制在1000px-1200px。

二、常用字体

现在网页的布局我们已经了解了,那么接下来就是网页中常用到的字体。

字体设计的总原则是:可辨识性和易读性。

中文建议使用微软雅黑字体,英文则建议使用arial字体。常用的字体大小号有以下几种:

2、14px则适用于非突出性的普通正文内容。

3、16px或18px适用于突出性的标题内容。

4、网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要有限适用偶数字号。

5、字体规格也不需要太多,最好适用三种混搭。如果需要更多

6、层次的区别,可以改变字体颜色或加粗来体现。

三、字体间距舒适范围

相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

1、行间距,推荐以字体大小的1.5-2倍作为参考;

2、段间距,推荐以字体大小的2-2.5倍作为参考。

3、当选用14px字体时,行间距:21-28px;段间距:8px-35px

四、字体颜色设计技巧

1、主文字的颜色,建议使用公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。

2、正文字体颜色,保险起见,选用易读性的深灰色,建议选用#333到#666之前的颜色。

3、辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

如果,你对颜色驾驭能力比较强,你也可以选择偏公司VI颜色的深色,作为正文字体颜色或者辅助性文字的颜色。

例如公司的品牌是蓝色,那么正文就可以选用偏蓝色的深色。这样处理之后,文字就有了环境色,网站整体将更加和谐。

深灰色偏蓝色

五、其他需要注意的事项

做网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。

1、除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏高度。

2、WindowXP的首屏高度平均值为580px,window7的首屏高度平均值是710px。

3、综合考虑到WindowXP已经退出市场,在实际操作时,我们以710px作为依据。

如下图,黄色区域是我们设计时要着重考虑的首屏范围

另外,是关于图片尺寸问题。需要全屏显示的图片,宽度尺寸严格设计为1920px。但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,控制在1200px以内,以免遇到小屏设备时显示不全,而造成信息遗漏。

说到这里,网站设计规范部分的内容就算是讲完了,当然上面的所有规范也只是规范,不要因为这些规范去限制自己的想法,规范是用来打破的,设计最重要的还是设计得美观,设计的时候具体要给多大的数值,取决于设计师,规范是用来参考的。

app设计规范

目前,很多APP设计师的APPUi设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

当然下面的10个方面的不仅是iPhone6界面视觉设计尺寸规范,也是iPhone6界面原型设计尺寸规范。值得APP设计师和APP产品经理好好的阅读。

所以,ios系统平台上的APP交互设计稿的尺寸,就按照iPhone6的尺寸来做。

尺寸大小如下:750*1334px

1、iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。

☆状态栏(statusbar):就是电量条,其高度为:40px;

☆导航栏(navigation):就是顶部条,其高度为:88px;

☆主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;

☆内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px

截图如下:

另外25学堂跟大家推荐3款测量标注工具为:

MarkMan马克鳗,Dorado标注,PXcook像素大厨。

2、关于iPhone6的图标的尺寸:

导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。

关于iPhone6的文字的尺寸:

导航栏的文字大小最大值是34-36px,标签栏的图标下方的文字大小为20px。

内容区域的文字大小是:20px24px,26px,28px,30px,32px,34px。

3、(iPhone6设计稿尺寸是@2x),

做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。

4、设置界面的图标高度和开关滑动按钮的图标高度:58px。

参考下图:

5、关于颜色,自从我做了3套高保真的交互原型图之后,发现后面还是改成画线框图来的快。

线框图的黑白灰之纯美,有利于专心布局界面,而不用在意界面的颜色搭配。

黑白灰颜色常用的数值是:

①文字黑色#282828

②文字深灰色#656565

③文字浅灰色#98989

④边框浅灰色#C3C3C3

⑤背景淡灰色#f2f2f2

⑥按钮背景纯白色#ffffff

6、常用的可点击高度,在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。

参考图片如下,

7、搜索栏的高度,在iPhone6的原型图上,统一成58px。

在iPhone6设计稿中,58px也是一个常用的设计尺寸。

8、在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。

B、亲密距离:比如,左边图标与右边文字之间的距离。

9、原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。

比如:

☆iPhone5在@2x屏幕尺寸是,640x1136px;对应的@1x,屏幕尺寸就是320x568px;

☆iPhone6在@2x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就是375x667px;

☆iPhone6Plus在@3x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就414x736px;

参考图片如下:

10、iPhone6Plus的@3x,iPhone6的@2x,iPhone5的@2x的介绍

☆iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x736pt-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是安卓机目前最流行的大屏设计稿尺寸。

☆iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,逻辑分辨率是375x667pt-@1x。

☆iPhone5是4英寸屏幕,640x1136px-@2x的像素分辨率,逻辑分辨率是320x568pt-@1x。

【综上所述】iPhone6的原型规范如下:

1、界面尺寸布局:满屏尺寸750x1334px

2、高度电量条高度40px,导航栏高度88px,标签栏高度98px;

3、各区域图标大小导航栏图标44px,标签栏图标50px;

4、各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

6、常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC;

7、常用可点击区域的高度:88px;

8、单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

9、常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;

10、按钮和文本框,原型图做成直角的,圆角半径是多少,由Ui来设计;

12、以上所有的规范仅供参考,该调整和修改的地方可以调整。具体情况具体分析。

THE END
1.设计米家APP素材米家APP 作为接入小米IoT 平台设备集中展示和控制的应用,是用户控制智能产品最常用的应用,为了使用户在使用米家APP 时,获得控制设备的良好体验,避免出现图片和UI 等元素风格不统一的现象,小米IoT 平台制定了“米家APP 素材设计规范”,开发者需按照本文档中的内容,提供产品在米家APP 上的素材,否则产品将无法通过验收...https://iot.mi.com/new/doc/tools-and-resources/design/elements
1.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
2.App设计规范怎么做?App设计规范是指对App设计的具体技术要求,是App设计工作的规则,同时能够方便后续协调合作以及APP视觉迭代。 App设计规范中的视觉规范和图标按钮规范是指整套APP界面的视觉风格一致,主要包括对色彩、文字、视图、控件、加载、常态点击态等。 但是为何App设计会有这些规范呢?原因如下: ...https://modao.cc/design/app-design-standards.html
3.iOSAPP图标icon尺寸规范,收藏篇!功能图标设计规范虽然图标在应用程序APP界面中的占据不大,但对用户体验产生的影响不容小觑。APP图标尺寸设计的效果,通常直接决定着用户的去留问题。APP图标尺寸是用户能直接感知的,优质的iOS APP图标尺寸往往会留住一大批用户。一篇完整且清晰的iOS APP图标尺寸规范,便成为设计师设计优质iOS APP图标的帮手。 http://www.zzfmdn.com/article/1348310
4.icon图标设计规范—iOS篇iOS图标设计既要有功能性,又要具有独特的个性,通过设计良好的iOS图标icon,有助于提高产品的转化率、参与度甚至盈利能力。iOS图标需要清晰的传递产品信息,促使用户点击下载产品,为了使高度概括性的图形能够准确的代替产品定位,设计师需要提炼与图标相关的造型、颜色、文字以做设计备用。Pixso总结了iOS图标设计规范,以及确保...https://pixso.cn/designskills/iostubiao/
5.手机APP设计规范整理:图标和按钮视觉设计规范手机软件软件教程手机APP设计规范指对整套APP界面进行视觉设计UI风格的统一,对界面元素的样式、颜色、图标按钮和大小设定统一的规范和使用原则。方便以后协调合作和APP视觉迭代。 第一部分:APP界面里面的图标(iCON)设计规范 我们在绘制APP UI界面设计里面的图标,在PS里面尽可能用形状来绘制。保证图标和按钮是矢量图。切图的时候的格式都...https://www.jb51.net/softjc/383445.html
6.app图标设计尺寸规范(ui图标大小规范)知识库主题:app图标设计尺寸规范(ui图标大小规范)图标设计流程 1.定义主题。定义主题是指把要设计的图标所...https://bbs.openke.cn/thread-1333475-1-1.html
7.手机图标ui设计尺寸:ui设计app图标尺寸规范Android APP LOGO尺寸 android 启动图标的尺寸大小和圆角半径大小规范720*1280px的安卓设计界面对应的启动图标尺寸是96px*96px圆角约等于18px1080*1920px的安卓界面设计对应的...一个Alpha 通道透明的32位 PNG 图片。由于安卓设备众多,一个应用程序图标需要设计几种不同大小,如: LDPI (Low Density Screen,120 DPI...https://www.pianshen.com/article/57171625368/
8.图标设计是什么意思?详解图标(ICON)设计的类型规范及设计原则图标设计(英文:Icon Design)也成为ICON设计,图标可分为广义、狭义两种,广义指的是现实世界中的图形符号、且有明确指向的含义,而狭义的图标指的设备界面中的象形图和表意文字,这些设备泛指承载互联网产品的载体,如手机、电脑、iPad…等。在UI设计中,图标设计主要具是针对狭义的概念。 https://www.youhuaxing.cn/seojianzhan/17757.html
9.从零开始设计一款APP之Android设计规范篇优设网《从零开始设计一款App》系列文章共6部分,之前已经讲了前5个部分,今天把设计规范部分也给大家科普下,赶紧来学习。 U妹列了一个小小的目录: 基础概念 Android界面设计规范 Android切图标注 安卓开发单位换算 总结 一. 基础概念 1. 什么是DPI? DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的...https://www.uisdc.com/android-design-guideline-in-app/
10.图标规范标准(IOS/Android)本小节中ios图标标准均以iPhone6为例 1.APP图标 APP图标指应用图标,图标尺寸为120x120,如果是游戏类应用,这个图标也会被用在Game Center中。由于IOS应用图标是由于系统统一切圆角,所以设计的时候直接出方形图标即可。设计时可根据需要作出圆角供展示使用。 https://www.jianshu.com/p/d93f01988010
11.手机网站设计规范手机网站设计广州手机网站设计iPhone、iPad、Android 手机网站设计及APP、UI设计尺寸规范!!! 标签:网站设计,APP设计,UI设计,手机网站设计由于不断推出新的手机,也不断完善手机的功能,手机的尺寸也越来越多,不同手机尺寸对网站及UI设计要求是不一样的,手机网站设计规范是怎样的呢,小派给大家手机了不同手机的设计尺寸规范,供大家借鉴参考! iPhone...https://www.pidcn.com/news/detail/280.html
12.移动应用界面设计的尺寸规范「建议收藏」腾讯云开发者社区d、通知图标 如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x24 dp ,图形实际区域为 22 x22 dp 。 注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px 。 https://cloud.tencent.com/developer/article/2030078