首页
学习
活动
专区
工具
TVP
发布

为什么页面设计稿差距这么大

设计设计师是最贴近产品体验的人,但是术业有专攻,设计师往往更加注重视觉的表现,而容易犯一些美丽的错误: 1,以原生 APP 的体验类比 H5 页面设计 我们都知道,原生 APP 的体验非常流畅,界面也非常华丽...所以这里,建议设计师可以多比照其他 H5 网站的表现来进行设计,而不要经常比照 APP 的体验。 2,设计稿都是最完美的状态 是的,设计稿上面往往体现的都是最完美的状态。...这些情况多数在设计稿上不会体现,往往要到开发过程中再去确认细节,比较浪费时间。 3,活字用了非系统字体 所谓活字,就是直接以文本形式展示在页面上,而不是用图片模拟的文字。...当拿到设计稿时,确认好布局之后,就是各种溢出状态的确认了。 2,不分析设计稿就动手写代码 作为新手拿到设计稿之后,往往都想很快写代码,因为写代码才有快感。...虽说调个宽度也不麻烦,但是当开发大型复杂页面的时候,这些联动的小改动也足够搞死人了。 5,不仔细看设计稿 最常见的错误就是,设计稿上有边框,但是颜色太淡没看到。

76230

H5运营类页面设计浅谈

作者:major,微信高级设计师 2014至2015年,H5发展得如火如荼,各类手机端小游戏、运营、广告,纷纷采用H5的形式来进行产品和品牌传播。...在这里聊一下对H5运营类页面设计的观察和思考,抛砖引玉。 一....简介 H5运营类页面设计,是指用来承载运营活动、品牌活动或信息传递的移动端页面设计;具有展示空间小、时间碎且短、操作可互动的特点;直接目的是引起用户病毒式分享,从而提升活跃度和品牌形象。...,提供内容让用户对运营活动有更进一步的了解,同时,常会有表单出现,与用户进行互动; 进行H5设计的时候,需根据主题和内容,选择适合自己产品的H5类型,来最大化地促进传播和分享。...H5移动端页面设计心得分享》 http://www.uisdc.com/html5-case-experience-summary 3.

1.8K60
您找到你想要的搜索结果了吗?
是的
没有找到

细谈设计稿还原

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。...首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: 元素大小 元素与元素之间的间距 元素在页面的位置...总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。...(半行间距不同浏览器还可能表现不一样),标记的尺寸再减去这个半行间距就是实际的间距。...设计师的有些设计到底是故意为之还是出了点小差? 移动端各种手机尺寸,只给一个标准的,其他自由发挥怎么搞? 所以最后如果要细究到0像素还原,最艰难的问题只有两个:文字的问题;完美的设计稿

1.5K10

细谈设计稿还原

按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。...首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题: 元素大小 元素与元素之间的间距 元素在页面的位置...总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。...,然后你还要熟记常规行高的半行间距(半行间距不同浏览器还可能表现不一样),标记的尺寸再减去这个半行间距就是实际的间距。...设计师的有些设计到底是故意为之还是出了点小差? 移动端各种手机尺寸,只给一个标准的,其他自由发挥怎么搞? 所以最后如果要细究到0像素还原,最艰难的问题只有两个:文字的问题;完美的设计稿

2.5K70

如何设计实现H5营销页面搭建系统

单纯的去看页面的不同呈现,可能仅仅就是加了一个拖拽的操作。但真正准备去落地的时候,发现其中的细节特别多,也包含了很多的设计理念在里面。...组件 Schema 如何设计? 画布区域和预览时组件的渲染是否可共用一套渲染逻辑?...组件 Schema 设计 这里涉及到组件、画布和属性区域三块的联动。主要包含组件强相关的表单属性以及初始值。...从页面呈现上来看并没有太大的差异,那么从代码设计上,这两部分当然就可以共享一个组件。...其实无论是组件动态加载还是组件schema的设计、数据结构的设计、组件库的维护等,每个团队都可以制定一套适合自己的规范,没有绝对的对错之分。

1.1K20

通天塔页面搭建提效揭秘:设计稿自动生成楼层

转换完成后将通过表达式引擎解析表达式并取得正确的值,通过事件解析引擎解析用户自定义事件并完成事件的绑定,完成解析赋值以及事件绑定后进行视图的渲染,最终将目标页面展示到屏幕 设计稿自动识别生成楼层项目是作者团队在...在项目一期落地后,正值618核心会场搭建高潮期,作者团队以青绿主会场的青绿公告楼层作为首批支持的案例,实现由设计稿自动识别一键生成通天塔楼层并交付给大促运营进行页面搭建。...3.1 出发点 从设计稿出发,提升页面搭建效率,亟需解决的核心问题有: 如何打通各平台的链路,减少搭建前期的操作步骤 如何优化搭建动线,升级交互体验,减少搭建时的学习成本和耗时 面对这些问题,作者团队制定了设计稿自动识别生成楼层的方案...4.1 跨平台数据共享 通过对用户操作习惯的调研,作者发现,受限于Sketch软件在电脑系统的使用,绝大多数用户在搭建楼层时,会先将设计稿上传至RELAAAY平台,通过线上页面查看标注后在通天塔进行楼层视觉稿还原...通过保存功能,可以创建个人楼层样式专区,后期可以在各个页面复用该楼层样式。

99120

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。...这里借用 Object-fit 的方法命名方便记忆,下面简单介绍 H5 页面适配几种展现形式。...在做适配之前,首先要和设计师定义好页面的宽高比,即设计稿的分辨率大小,因为活动主要是通过微信进行传播推广,所以这里我使用的是 iphone5/5s 机型微信浏览器窗口分辨率 640*1008。...拿最近做的项目举例,该 H5 页面基本可归类为以下 4 种内容类型: 1、填充满窗口的层,比如背景幕布(图1)。 ? 图1 这种层实现最简单,采用「fill 模式」适配形式。...当页面内容不适合方向旋转展示,此时就不要无脑适配,有两个方式可以选择: 找设计师出一版另一方向的响应式设计稿然后制作成响应式页面; 出现提示方式让用户旋转回支持的方向,比如(图5)。 ?

1.2K50

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一遍分辨率测试和微调,这时想屎的心都有了。...这里借用 Object-fit 的方法命名方便记忆,下面简单介绍 H5 页面适配几种展现形式。...在做适配之前,首先要和设计师定义好页面的宽高比,即设计稿的分辨率大小,因为活动主要是通过微信进行传播推广,所以这里我使用的是 iphone5/5s 机型微信浏览器窗口分辨率 640*1008。...拿最近做的项目举例,该 H5 页面基本可归类为以下 4 种内容类型: 1、填充满窗口的层,比如背景幕布(图1)。 ? 图1 这种层实现最简单,采用「fill 模式」适配形式。...当页面内容不适合方向旋转展示,此时就不要无脑适配,有两个方式可以选择: 找设计师出一版另一方向的响应式设计稿然后制作成响应式页面; 出现提示方式让用户旋转回支持的方向,比如(图5)。 ?

95040

uni-app开发微信小程序和h5应用

尺寸单位 uni-app支持的通用css单位包括 px、rpx。...px 和 rpx之间的转换关系如下: 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换言之,页面元素宽度在uni-app中的宽度计算公式: 750 * 元素在设计稿中的宽度.../ 设计稿基准宽度 举例说明: 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx...若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。...若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。 2.

1.1K20

设计稿生成游戏界面

从库的开发到封装的界面编辑器,其实我们的游戏界面搭建效率已经很高了,但是从设计稿直出,业内也一直没有停止过尝试,一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件,cocosCreator...BINARY_PATH = "/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool"; // 导出画板artboards、页面...有了设计稿的结构描述文件+资源,接下来要在引擎的界面编辑器上还原就比较简单了,这里有两种方式,一种是直接转换,把设计稿的scheme描述文件转换成引擎界面编辑器的fire描述文件,引擎生成界面描述语言这部分源码并没有开源...因为简单的设计稿结构读取和导出是不能满足需求的,最直接的就是设计稿上会有大量的节点的冗余,因为稿子中也保存了设计师创作的一些中间过程,比如大量的路径和未合并的图层,在导出的时候需要做甄别,同时设计师在创作的时候也需要按照一定规范去约束层级关系...最近几年前端有一个很前沿的方向就是前端智能化,就是通过AI/CV技术,使前端工具链具备理解能力,进而辅助开发提升研发效率,其中基于设计稿智能布局和组件智能识别就是其中一个。

90510

8个视觉稿设计工具,页面视觉和实时交互就靠它们

对于视觉设计师、交互设计师来说,他们需要做的不仅仅是设计一张张静态的页面和独立的icon,他们需要将这些元素整体组合在一起,根据整体画面感和视觉体验来做出修改。...因此,一款快速、方便的视觉稿设计工具就显得尤为重要,通过这些工具,设计师可以真实地看到网站呈现的效果,并且可以传递至其他同事,还可以更加便利地与用户进行沟通交流,查看反馈。...1、Invisionapp InVision 是一款强大的设计原型开发工具,可以帮助设计师和设计团队更加高效地做原型设计。...在制作原型设计的时候,InVision可以让你创建互动活动,上传设计文件并添加动画、手势等,便于和同事、用户交流,获取反馈。...在这里,你可以在主屏幕上轻松地测试iOS图标设计。 ? 5、Webflow Webflow无需编写代码,你可以直接在浏览器中完成网站的视觉和交互设计并实时预览,设计师可以随时修改。

1.5K50

H5游戏开发指南

1、准备条件 1.1、设计师应该注意的地方 移动端最大的问题在于多种设备,多种平台,多种尺寸,当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的...那么多手机屏幕尺寸设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有很多2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。先看一下市面上主流的手机尺寸: ?...我们在H5开发初期的时候,进行了各种尺寸设计稿尝试,比如1倍的(320X480)、2倍的(640X1136)、3倍的(1242X2280)像素。最终得出的试验结果是。...H5设计稿一般设计为640X1136即可。...所以,我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下或者太偏上的位置,否则前端布局时可能出现内容显示不全的情况。

4.1K112

设计稿到代码真的可行吗?

背景:众所周知,在前端开发过程中,视觉搞到重构稿是一个不可忽略的过程,通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情,他们的职责是: 1、负责视觉搞对重构稿的还原,抽取基础公共组件。...2、和前端研发同事对接 3、维护整体前端页面框架 4、考虑响应式,解决浏览器样式兼容性问题 那么,有么假如团队规模比较小,没有配置重构团队,那么,这件事情毫无疑问会丢给前端研发同学,前端研发同学通常也具备一定的视觉稿到代码的转换能力...,只不过可能对于css这块的熟悉程度远远不如专业的重构开发厉害,输出的页面框架代码以及样式的规范性上可能不如正规军,其优势在于和后端对接业务逻辑,处理页面间的交互。...2、只有div,image,span,这三个基础的元素,很明显视觉稿上的checkbox没有体现,为什么没有,后面在调研figma 2 code时候,有源码分析。...总结: figma,sketch在代码生成路上,先驱有过不少探索,总体来讲,生成一次性活动页面,性价比可能很高,但是要生成长期维护型代码,尚处于不可用阶段,后续,可以走小组件路线,既不要寄希望于整体页面生成

84680

响应式布局rem布局

我们做的h5页面只能在移动端访问(rem不兼容低级版本浏览器) 第一步:从UI设计师拿到设计稿(psd) 640*1136 第二部:在样式中给HTML一个fontSize值,我们一般都给一个比较好算的值...,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差 html{ font-size: 100px;/*1rem=100px*/ } 第三步:写页面...,写样式 完全按照设计尺寸来写样式,不管任何事情,设计稿给你的宽度,高度字体大小、margin、padding的值是多少,我们就写多少 但是我们在写样式的时候,需要把得到的像素值除以100,计算出对应的...rem值,我们设定的也都是rem的值 (值得注意点的是外层盒子的宽度我们一般还是不写固定值,沿用流式布局的思想) 第四步:根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值...设计稿:640 fontSize=100 手机:320 fontSize=50 手机:375 fontSize=58.59375 // 根据当前屏幕的宽度和设计稿宽度的比例

1.9K10

设备尺寸杂谈:响应性Web设计中的尺寸问题

目前在为移动设备设计界面时,最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计,因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后,这将有助于我们进行更好的设计。 ?...一代iPad的屏幕尺寸是9.7寸,分辨率为1024*768、132dpi。Kindle Kyeboard 3G的物理尺寸只有6寸,同样是768*1024的分辨率,像素却是212dpi。...实际上对于设计师来说,他们对分辨率并不是那么感兴趣。因为他们是为人类而设计,所以最好有 width: 1寸,这样的单位。...可惜的是,当今的社会是电子化的社会,物理的尺寸和电子像素不完全一致,做为设计师,我们需要来填补这两个不同之间的鸿沟。...通过 Resolution Media Query 和 Width Query 的配合使用,我们能够将具有同样宽度的不同大小的设备区分开,从而来相应的调整设计中的元素布局。

89720

H5 页面列表缓存方案

前言 在 H5 日常开发中,会经常遇到列表点击进入详情页面然后返回列表的情况,对于电商类平台尤为常见,像我们平常用的淘宝、京东等电商平台都是做了缓存,而且不只是列表,很多地方都用到了缓存。...但刚才说的都是 App,在原生 App 中,页面是一层层的 View,盖在 LastPage 上,天然就能够保存上一个页面的状态,而 H5 不同,从详情返回到列表后,状态会被清除掉,重新走一遍生命周期,...第二种解决方案就是手动保存状态,即在页面卸载时手动将页面的状态收集存储起来,在页面挂载的时候进行数据恢复,个人采用的就是简单粗暴的后者,实现上比较简单。...-> Detail -> List 需要缓存没问题,但是用户从 List 返回到其他页面后再次进入 List 时,是进入一个新的页面,从逻辑上来说就不应该在用之前缓存的数据,而是重新获取数据。...何时取 在进入缓存页面的时候取,取的时候又有几种情况 当导航操作为 POP 时取,因为每当 PUSH 时,都算是进入一个新的页面,这种情况是不应该用缓存数据。

1.4K20
领券