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.字体天下520个设计师必备站点 亲,优设喊你换主页啦 品牌字库合集免费下载 原创正版可商用 1000套免费商用字体打包 很多很多很多 一键打包下载 免费商用字体 一键轻松换字 设计师必备字体管理神器 中文字体(8995) 更多中文字体 字型隶书幼圆行书草书行楷篆体黑体细黑大黑宋体广告海报楷体魏碑毛笔手写书法钢笔彩云卡通综艺新魏仿宋https://www.fonts.net.cn/
2.字体下载求字体网提供上传图片找字体、字体实时预览、字体下载、字体版权检测、字体补齐等服务,本网站可识别中文、英文、日韩、书法等多种字体。只要上传图片或输入字体名称,就可以帮您找字体。http://tool.qiuziti.com/
3.体字体搜索设计师爱心体1号字 查看明细 锐字潮牌真言体2.0 查看明细 鸿蒙字体 查看明细 液晶数字体 查看明细 凤凰点阵体 查看明细 字体传奇南安体 查看明细 德拉黑体 查看明细 文道潮黑体 查看明细 荆南缘默体 查看明细 汇文明朝体 查看明细 萌神手写体 查看明细 https://ziyouziti.com/index-index-search-keyword-%E4%BD%93.html
4.在线字体设计在线字体转换艺术字体在线设计转换生成在线字体设计网收集整理艺术字体美术字体pop字体等创意字体,集成艺术字体在线设计智能实现毛笔字体在线生成矢量,提供行书草书楷书篆书隶书等书法字体在线转换,请牢记天空字体 www.skyfont.comhttp://www.skyfont.com/
5.UI交互如果还没有缓过来,不想学啥新技巧,不妨收一波设计干货吧。5月第一波干货里有些有趣的东西, 作品集网站 合集+ 着陆页 分类合集+现实字体设计项目合集 + 设计开发一站式参考合集网站,都是相当实用的灵感来源,而 AI 网站设计工具+ AI 配色工具合集 + 国产 AI 艺术图片生成平台,也都是使用的工具。https://tieui.com/ialab/xingyezixun/
6.数据可视化细节设计技巧在数据可视化设计中,我们经常性会忽略一些基础设计细节。一、动效设计落地;二、字体排版设计细节;三、数字字体运用;四、如何展示数据图形;五、参考素材网站 从数据到图形的表达 让设计服务于数据内容,给各类用户以最为清晰明确迅捷的数据展示。信息的有效传递是设计重点。需构建清晰的层级关系,运用准确的视觉语言。通过http://www.nashdt.com/h-nd-39.html
7.网页设计论文在日常学习和工作中,大家总免不了要接触或使用论文吧,论文是我们对某个问题进行深入研究的文章。那么你有了解过论文吗?下面是小编整理的网页设计论文,仅供参考,大家一起来看看吧。 网页设计论文1 1计算机网页包装设计与图像处理研究 1.1网页包装设计中的图像处理方法 https://www.ruiwen.com/lunwen/6161857.html
8.设计师专属的导航网站设计师导航页相信很多设计师都有这样的经历,平时需要用到很多参考网站,从做设计、写博客、画画、学习,浏览器的书签保存了一大堆,但在换设备时书签管理就是一个头疼的事。 如何解决这个问题呢?其实很简单,你只需要一个简单的设计素材资源聚合网站,上面包含所有关于设计的资源网站,你需要的设计素材上面都可以找到。 https://blog.csdn.net/cccccww/article/details/123642004
9.在线设计字体网站.51CTO博客在线设计字体网站.,http://fontstruct.fontshop.com/基于actionscript技术。参考图片:https://blog.51cto.com/u_15127626/4771553
10.设计帝国高级搜索|网站地图|TAG标签RSS订阅[设为首页] [加入收藏] 设计帝国原创投稿征集-主 十年之前,我不认识你,你不属于我们。十年只有,我们是朋友。 设计帝国(www.warting.com)专注于设计欣赏与设计交流。从2009到2019,十年的时光陪伴,下一个十年,希望还有你的[查看全文] https://www.warting.com/
11.企业型网站模版设计参考:提供企业型网站模版设计的参考,以提升综上所述,企业型网站模板设计需要从明确设计目的和功能、视觉设计原则、用户体验设计、专业性和创意设计以及参考案例等多个方面进行综合考虑。通过精心设计和优化,可以提升企业品牌形象,增强用户对企业的认知和好感度。http://iwanb.cn/content/?727.html
12.艺术字体在线生成器艺术字转换器字体转换器免费书法字体设计找字体网最初是为了黑板报字体参考而创造,现在找字体网已经成为了互联网世界最流行的艺术字体在线生成器工具网站,提供了字体识别.pop字体转换器.英文字体.手机字体大小怎么调.毛笔字体.手写字体.正楷字体.楷书字体,找字体网作为互联网第一款字体转换器一直忠诚且稳定免费https://www.qt86.com/
13.艺术字转换器字体转换器免费书法字体设计大全艺术字体在线生成,艺术字体转换,艺术字体设计,在线艺术字体转换器 简介(Description) 415个字符 (一般不超过200字符) 找字体网最初是为了黑板报字体参考而创造,现在找字体网已经成为了互联网世界最流行的艺术字体在线生成器工具网站,提供了字体识别.pop字体转换器.英文字体.手机字体大小怎么调.毛笔字体.手写字体.正楷字http://024rcw.cn/tools/seo-lookup/www.qt86.com
14.欧莱凯设计网1 张 金色2025立体3D跨年字体 13 7小时前 踩 4 赞 4 收藏 HD 源文件 1 张 卡通骨质疏松性骨痛素材 16 7小时前 踩 2 赞 4 收藏 HD 8平面设计 艺术摄影 包装设计 APP界面 插画艺术 家居建筑 工业设计 品牌专区 关注我们-About Us-Thank you for visit 网站简介 服务团队 企业政府网站建设https://www.2008php.com/
15.如何进行wiki上传的文件乱码调整如何进行wiki上传的文件乱码调整,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的甘http://chengdu.cdxwcx.cn/article/pogcjs.html
16.[字由]设计师必备字体利器www.hellofont.cn网站内容描述(仅供参考):字体下载,字由是为设计师量身定做的一款字体管理工具。这里收集了国内外上千款精选字体,不仅让你轻松、自由和**的使用字体,还为你展示了每款字体的详细信息和精选的字体文章。字由将成为你设计中的好帮手,让你领略字体在设计中的更多精彩。 http://www.fwol.cn/gotoweb.php?id=5495154
17.2024网页UI设计规范,新手科普!为了更好地进行色彩搭配,设计师可以使用一些工具来辅助,如色彩搭配网站、色彩搭配软件等。这些工具能够提供色彩的搭配方案和调色板,帮助设计师更好地选择和搭配色彩。 2.3 字体规范 在网页UI设计规范中,字体的选择和使用是非常重要的,它直接影响到用户对网页的阅读体验和整体感知。以下是网页UI设计规范中一些常见的字体https://pixso.cn/designskills/2024-website-ui-specification/
18.《平面设计师参考手册版式设计》(丛昌楠)简介书评平面设计书籍版式设计速查手册,字体配色印刷版式设计原理,设计师创意平面设计艺术设计专业教材,近300个典型设计图例分析,7个PPT教学课件参考资料 作者:丛昌楠出版社:人民邮电出版社出版时间:2021年07月 手机专享价 ¥ 当当价降价通知 ¥66.90 定价 ¥89.90 http://product.dangdang.com/29285137.html
19.汉仪字体用心绽放文字之美汉仪字库成立于1993年,致力于提供以字体为中心的全类别场景服务。目前共推出上千款中西文字体,并面向个人终端用户,开发多款明星手写字体。本站提供汉仪正版字体下载(非商业),字体专业知识、案例、行业动态等。https://www.hanyi.com.cn/
20.如何用设计软件快速完成一份高质量海报?这里有三个被广泛运用的字体设计平台,供你参考: iFonts iFonts专注于字体创意,致力打造服务于设计人员的优秀产品。iFonts字体助手主要包含快速换字、字体管理、字体特效等字体创意相关功能。 iFonts 华星图库 其实华星图库涵盖了包括平面设计、视频、字体、创新等多个层面,但如果你仔细浏览会发现,这里的文字设计,每一个都https://36kr.com/p/1460105150679813
21.一个设计师对锤子官网的微吐槽极客公园建议:Smartisan 自制 Logotype 看起来是参考了 FF Signa 之后的设计,不过个人觉得其间距(spacing) 和字距(kerning)并不是很理想,但尽管如此这并不妨碍锤子在整个网站“贯彻”此字体设计,制作一套属于自己的 Logo 字体然后用于网站上是非常常见的做法。 https://www.geekpark.net/news/210762