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.iOSAPP图标尺寸及iPhone手机尺寸iPhone尺寸iPhone机型尺寸/...iPhone尺寸 iPhone机型 尺寸/开发尺寸 尺寸/像素尺寸 iPhone 12 Pro Max 428x926 pt (1284x2778 px @3x) iPhone 12 Pro 390xhttps://juejin.cn/post/6970979696104177677
2.手机图标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/
3.毛绒粉色可爱手机APP图标图片免费下载PNG素材编号1l0ixn94g图精灵为您提供毛绒粉色可爱手机APP图标免费下载,本设计作品为毛绒粉色可爱手机APP图标,格式为PNG,尺寸为600x1067,下载后直接使用,下载毛绒粉色可爱手机APP图标图片素材就到图精灵。https://616pic.com/sucai/1l0ixn94g.html
4.手机图标调大小APP推荐手机图标调大小下载豌豆荚手机图标调大小榜单为您提供最新手机图标调大小大全,这里不仅有手机图标调大小安卓版本APP、历史版本应用下载资源,还有类似手机图标调大小的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/400933/
5.APP图标设计的尺寸和分辨率/有何标准?在这个手机不离手的时代,APP图标设计无疑成为了每个应用赢得用户首印象的头号战士。作为一名自诩精通互联网技术的文章作者,我自然不能放过为各位揭开APP图标设计中尺寸与分辨率神秘面纱的机会。 首先,标准尺寸是个啥?说白了,就是那些聪明的设计大咖们为了让我们的眼球在看到那些小巧玲珑的APP图标时不至于眼花缭乱而精心...http://www.apppark.cn/t-50962.html
6.手机微信app图标官方高清手机微信app图标设计素材下载懒人图库提供精品模板、素材下载,本设计作品为手机微信app图标,格式:AI,像素:610x610,下载即可获得源文件,下载手机微信app图标就到懒人图库。 素材信息: 素材编号:121163 素材分类:免抠元素 颜色模式:RGB 图片尺寸像素:610x610px 文件大小:430KB 文件格式:AI ...https://www.lanrentuku.com/sucai/121163.html?ivk_sa=1024320u
7.中国电信手机app应用图标图标免费下载图标7mxUPegek新图网(ixintu.com)提供海量U I 图标免费下载,中国电信手机app应用图标由新图网用户分享上传,推荐搜索中国电信,中国电信图标应用,中国电信手机app应用图标,图标,应用APP,手机中国电信图标获得更多内容。图中水印仅用于网站防护,不具有其他含义。 [声明]新图网素材为用户免费自行分享上传,若您发现权利被侵害,请右侧投诉或...https://ixintu.com/sucai/7mxUPegek.html
8.UI尺寸规范对照表常用参考表对照表设备尺寸分辨率状态栏高度导航栏高度标签栏高度 iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 2048×1536 px 264PPI 40px 88px 98px iPad 1 - 2 1024×768 px 132PPI 20px 44px 49px iPad Mini 1024×768 px 163PPI 20px 44px 49px iPad图标尺寸: 设备App Store程序应用主屏幕Spotlight搜索...http://tools.jb51.net/table/ui
9.ui尺寸规范对照表iPhone/iPad/AndroidUI尺寸规范iPad的设计尺寸 设备尺寸分辨率状态栏高度导航栏高度标签栏高度 iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2 2048×1536 px 264PPI 40px 88px 98px iPad 1 - 2 1024×768 px 132PPI 20px 44px 49px iPad Mini 1024×768 px 163PPI 20px 44px 49px iPad图标尺寸: 设备App Store程序应用主屏幕...http://www.kuquidc.com/ui/phonesize.php
1.android,iosappicon应用图标大小/尺寸icon不做圆角,有透明像素会导致ios上架被拒android:LDPI (Low Density Screen,120 DPI): 36 x 36 px。MDPI (Med...https://www.jianshu.com/p/748b2c8c1c6c
2.AndroidAPPLOGO尺寸Android APP LOGO尺寸 android 启动图标的尺寸大小和圆角半径大小规范 720*1280 px的安卓设计界面 对应的启动图标尺寸是 96px*96px 圆角约等于18px 1080*1920px的安卓界面设计 对应的启动图标尺寸是144px 144px 圆角约等于25px === 应用程序图标 (Icon)应当是一个 Alpha 通道透明的32位 PNG 图片。由于安卓设备...https://blog.csdn.net/forebe/article/details/79997814
3.手机app的图标一般是多大大小?手机app的图标一般是多种大小,因为不同的操作系统和设备需要不同尺寸的图标来适配。以下是几个主要平台和设备对于图标尺寸的要求:- iOS:在iOS系统上,iPhone、iPad和iPod Touch都有自己特定的图标大小要求。其中最常见的iPhone app icon尺寸为180 x 180像素,在App Store中展示时需提供1024 x 1024像素高清大图。- ...https://wap.zol.com.cn/ask/details_16744224_5011191_3.html
4.iOS和安卓手机的APP图标尺寸规范和图标命名规范安卓手机的APP图标尺寸规范跟命名规范如下信息图。 android图标规范信息图包含了安卓程序启动图标、安卓底部菜单图标、安卓弹出对话框顶部图标、安卓长列表内部列表项图标和安卓底部或顶部tab标签图标。非常齐全。 1. 安卓程序启动图标:ldpi (120 dpi) 小屏mdpi (160 dpi) ...https://www.douban.com/note/405510581
5.整理了APP图标尺寸规范,业务能力快速提升!手机App让人应接不暇,应用程序App图标作为一种辨识符号,是应用程序App的形象代言和操作导引,如何让海量的用户都能精准识别,并同时能在众多竞争者中脱颖而出,是应用程序App图标尺寸规范中需要探讨的重点。 1. APP图标设计软件 App图标设计师最常用的元素,也是设计中最繁琐的一环,但往往会出现缺少优质App图标库、创...https://pixso.cn/designskills/shouji-app-icon-size-specification/
6.APP常用的图标尺寸规范因此,在 UI 设计中图标是不能缺少的视觉元素。图标设计也自然成为了设计师的基本功,因此掌握图标的正确绘制对于设计师来说很重要。今天我们就学习一个图标的基础知识——APP 图标尺寸规范。首先要注意的是,APP 图标尺寸是包含两种规范的,IOS 和安卓的图标尺寸规范不同,手机端和 PC 端的图标尺寸规范不同。https://js.design/special/article/appicon-dimension-specification.html
7.App的页面尺寸及各个icon的尺寸大小陈鹤元你真的都了解app图标尺寸的设计规范吗?作为一名产品经理,要想用axure把页面画的美观点,一些常用的尺寸还是要背下来的。 下面元哥给你们整理了一下,记得关注收藏哦,需要用的时候就拿出来看看吧~~ 整理如下 原型设计尺寸 1、 iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为375x667px ...https://www.shangyexinzhi.com/article/3998219.html
8.ps制作app图标尺寸,ps制作app图标新闻资讯导语:如今,随着智能手机的普及,手机应用(App)已成为人们日常生活的重要组成部分。为了吸引和留住用户,开发一个功能强大、用户界面友好且用户体验独特的App至关重要。在这篇软文中,我们将探讨如何使用Photoshop(简称PS)这一强大的设计工具来制作一个精美的App界面,从而提供用户一个独特、愉悦的体验。 https://www.appgongsi.cn/newsinfo.php?id=2124
9.iOSAPP图标icon尺寸规范,收藏篇!功能图标设计规范虽然图标在应用程序APP界面中的占据不大,但对用户体验产生的影响不容小觑。APP图标尺寸设计的效果,通常直接决定着用户的去留问题。APP图标尺寸是用户能直接感知的,优质的iOS APP图标尺寸往往会留住一大批用户。一篇完整且清晰的iOS APP图标尺寸规范,便成为设计师设计优质iOS APP图标的帮手。 http://www.zzfmdn.com/article/1348310
10.一篇文章搞定APP应用市场图设计经验总结优波设计应用截图:尺寸不小于480*800,支持横屏或竖屏,单张图片不能超过3M,需要去除图中的顶部通知栏。 魅族 图标:512*512、PNG、直角,小于1M。 应用截图:如下图提供了四种尺寸以供选择,系统顶部通知栏不能存在其他无关APP图标,需要使用不带品牌标识的Android手机外观或魅族PRO 7 PLUS。 https://www.ubuuk.com/article/369.html
11.手机网站设计规范手机网站设计广州手机网站设计iPhone、iPad、Android 手机网站设计及APP、UI设计尺寸规范!!! 标签:网站设计,APP设计,UI设计,手机网站设计由于不断推出新的手机,也不断完善手机的功能,手机的尺寸也越来越多,不同手机尺寸对网站及UI设计要求是不一样的,手机网站设计规范是怎样的呢,小派给大家手机了不同手机的设计尺寸规范,供大家借鉴参考! iPhone...https://www.pidcn.com/news/detail/280.html
12.ui设计app图标尺寸规则应用图标在手机屏幕的显示尺寸仅为120*120px,这个尺寸是最重要的设计尺寸。https://www.hxsd.com/wenda/68341/