软件篇1Photoshop实例(下)UI设计(WUI系统设计&GUI移动端设计)+平面设计tiffanys

===================================================================

不顾一切的向前冲!致敬黑泽明

1910年,黑泽明出生在日本东京的一个武士家庭,从小家教很严,父亲不但让他学剑道,还逼着他学书法,而他却对绘画非常感兴趣,同时也鼓励孩子们看电影。第一次接触电影是在7岁时,父亲带他看的多是西部片和武打电影。黑泽明小时智力发育较晚,上小学时一度成为老师奚落的对象,甚至要坐到远离同学的地方。不过他很快展示了自己画画的天分,并立志要当一名画家。

黑泽明电影里的人物,大部份是悲观生命里的积极者,他们的价值观从来不会被现实的社会污染,当中的人物不时为更崇高的理想作出牺牲,令人伤感,但始终维护着人类的希望,是一种有份量的影响。(导演徐克评)

黑泽明的电影大多从社会问题的角度出发,深层次地剖析原因,并且其电影中融合了丰富的社会文化和民族精神,使得其电影恢宏磅礴的画面往往蕴含了丰富的文化底蕴,从而使得其作品成为经典。(《电影文学》评)

在黑泽明的电影中,很多人物有着激烈的情绪对抗,这些对抗场面都被赋予了张力十足、力度到位的电影语言,达到了意想不到的效果。在电影《罗生门》中,黑泽明运用纯电影化的手法揭示了真理的相对性和主观性,而每一个人物见证的相对真实性又必须由观众来作出判断。这种真理的相对性和主观性,体现在视听语言中,就是黑泽明对构图和场景的诗意性的运用。

摹客

操作篇

PS与AI联动

在ps中双击按钮矢量智能对象后再ai中未见到按钮,按住alt,滑动鼠标找到按钮进行编辑。

填充色是问号,“取消编组”,“释放剪切蒙版”后大部分就能填色了。

“释放符合路径”可以对整体对象进行局部编辑。

右键“变换”,“对称”可以进行水平,垂直,角度变换。

不同版本的PS

1.PSCS6中只能统一设置圆角,不能单独设置圆角,PSCC2018及更高版本PS中可以单独设置圆角。

2.PS中圆角矩形画之前在顶部属性栏设置圆角值,圆角图层在“属性窗口”修改圆角值,圆角矩形形状图层画好后用路径选择工具在顶部属性栏无法修改圆角值。

3.PS2020中选择工具的工具属性栏上勾选“自动选择”,在画面中用鼠标框选后组合,在图层面板取消“提示图层可见性”查看选中内容,文件夹上右键“快速导出为png”。用上这套操作,再用没有此系列操作的低版本PS简直觉得太不人性化了,强烈推荐PS2020及以上版本。

PS文件保存

1.PS中文件保存过大,保存为web格式,在四联中选择比较小的文件即可。

2.“无仿色”88%改为100%文件的颗粒感和条纹就没有了。

3.PS中“编辑”-->“首选项”-->“导出”,快速导出格式,改为png。

4.若有画板存储图片时候会多出画面显示区域,在图层面板上在画板文件夹上,选中画板,右键“快速导出为png”

5.图层上右键“复制CSS”,本电脑报错,有些电脑可以将css代码复制到txt中。

6.“文件”-->“导出”-->“画板至文件...”,“包含ICC配置文件”前的勾去掉就不会有白边,设置的200dpi也不会变成90多。“包含画板名称”若勾选会在白边左上角显示画板编号。

快捷操作

(1)锁定背景图层,框选需要移动的部分,ctrl+g群组,移动。

(2)检查图层情况,移动后,ctrl+z恢复,然后进行操作。

ps中最常用的快捷键和快捷键大全

复制图层:Ctrl+j盖印图层(将效果图复制到当前图层的上层):Ctrl+Alt+Shift+E向下合并图层(选中两个图层):Ctrl+E

将图层移动到图层文件夹的顶层:Ctrl+Shift+]

激活上一图层:Alt+中括号(】)

激活下一图层:Alt+中括号(【)

移至上一图层:Ctrl+中括号(】)

移至下一图层:Ctrl+中括号(【)

放大视窗:Ctrl+“+”缩小视窗:Ctrl+“—”放大局部(ALT+鼠标向前滚动):Ctrl+空格键+鼠标单击缩小局部(ALT+鼠标向后滚动):Alt+空格键+鼠标单击

剪切选择区域:Ctrl+X

复制选择区域:Ctrl+C

粘贴选择区域:Ctrl+V

轻微调整选区位置:Ctrl+Alt+方向键

复制并移动选区:Alt+移动工具

增加图像选区:按住Shift+划选区

减少选区:按住Atl+划选区

相交选区:Shift+Alt+划选区

3、前景色、背景色的设置快捷键:填充为前景色:Alt+delete填充为背景色:Ctrl+delete将前景色、背景色设置为默认设置(前黑后白模式):D前背景色互换:X

调整色相/饱和度:Ctrl+U

自由变换:Ctrl+T

去色:Ctrl+U+Shift

渐变色

剪切蒙版

CDR中右键拖入置入到容器。

PS中ctrl+alt+g剪切蒙版。

AI中剪切蒙版,“对象”-->“剪切蒙版”-->“建立”/“释放”

钢笔画对勾,工具属性栏去除对齐栅格前的勾,不然移动节点时候困难。

ppt中改变尺寸:“设计”-->“幻灯片大小”-->“标准(4:3)”,“宽屏(16:9),现在一般是宽屏”,“自定义大小”。

用直线工具画线,默认是填充有色,线条无色,用路径选择工具,在控制栏将填充色改为无,描边改为有色,这样修改线条宽时不会出错。

这种叠加的标注加描边比较容易看清楚

PS中修改路径

和AI类似,PS中的路径在直接选择工具时候,选中节点可以对节点进行修改。

折线用到插画勾线技巧,钢笔画路径后填充路径。

APP的状态栏,导航栏、操作栏,主菜单栏高度用矩形工具绘制相应高度的矩形,按规定高度做辅助线。

AI中复制到PS中的图标,复制图形可以编辑瞄点,不要复制智能对象不能编辑瞄点。

更多内容区可以用白色渐变遮罩。

尊敬的设计师,您有一份设计地图还没领取

这份地图就是一个基础知识清单,可以帮助你快速查找一些基础的知识点

1.设计地图的初衷

设计地图仅仅是一个抛砖引玉的制作,希望后面有更多的人输出更完整、更高质量的设计地图内容,去帮助到更多的设计师。

2.基础规范

2.1移动端设备适配

物理像素(设计师使用,也指分辨率,单位:px)逻辑像素(开发使用,iOS单位为pt,Android单位为dp)倍率=物理像素/逻辑像素(常见有1x、2x、3x)

1x,一倍图,1pt=1px2x,二倍图,1pt=2px3x,三倍图,1pt=3px

2.2网页删格

屏幕分辨率(目标用户屏幕情况)

列宽、水槽(常见pc端12列,平板8列,手机端4列)(Axn)-i=W

网页端列宽大多数情况为60-80px

水槽常见为20px列宽、水槽宽度都不是绝对,仅常见参考

2.3iOS规范

FlatDesign中文:苹方,英文:SanFrancisco,数字:HelveticaNeue最小触摸区域44x44ptiOS的开发单位:Pt(“points”的缩写,点)1pt=1/72英寸

375x667:iPhone7/8/SE二代375x812:iPhone11Pro/XS414x736:iPhone7Plus/8Plus/XSMax414x896:iPhone11/11ProMax

2.4安卓规范

MaterialDesign系统默认中文:思源黑体/NOTO,英文、数字:Roboto最小触摸区域48x48dp,最小点击区域24x24dp

主要尺寸:360x640@3x=1080主流机型

2.5各平台规范地址

3.B端产品

基础定义:为组织或企业提供商业价值的产品或服务,也包括为个人或小团体提供服务的后台产品

OA系统(OFFICEAUTOMATION,办公自动化)

便捷的共享信息、提高协同工作效率、实现迅速、全方位的信息采集和处理,为企业管理和决策提供合理科学的依据

ERP系统(EnterpriseResourcePlanning,企业资源计划)

是指针对货物资源、人力资源、财务资源、信息资源形成一体化的企业管理软件

CRM系统(Customerrelationshipmanagementsystem,客户关系管理系统)

以客户为核心、利用信息技术,实现营销、销售、服务等活动自动化,并建立一个客户信息的收集、管理、分析、利用的系统,帮助企业实现以客户为中心的管理模式

SAAS系统(Software-as-a-Service,软件即服务)

4.数据大屏

关键词:FUI\HUD\SCI-FI

图表工具:echarts、hichcharts原生开发:HTML5、JS、CSS、WebGL、unity第三方开发工具:datav数据可视化、腾讯云图、百度智能云等

常见的大屏有拼接屏(避免重要内容处于接缝处而产生分裂感,常见的有1.7mm缝隙、3.5mm缝隙)、LED屏等设计时需要了解大屏的物理尺寸及视频输出分辨率,如果大屏为高分辨率屏,优先选择1:1尺寸进行设计

5.黑暗模式

黑暗模式不等同于夜间模式,黑暗模式需要满足无障碍阅读(WCAG)AA级的标准,是产品模式的一种补充。

5.1Android系统

黑暗模式称为DarkTheme

背景色值#121212

文本色值:

最高级文本:87%透明度白色中等级文本:60%透明度白色不可点击文本:38%透明度白色

5.2iOS系统

黑暗模式称为DarkMode背景色值#000000文本色值(分为初级,次级,三级和四级)默认模式:初级(#000000,100%),次级(#3C3C43,60%),三级(#3C3C43,30%),四级(#3C3C43,18%)黑暗模式:初级(#FFFFFF,100%),次级(#EBEBF5,60%),三级(#EBEBF5,30%),四级(#EBEBF5,18%)

系统参考色:

6.交互基本原则

6.1格式塔原理

网络上有很多版本,这里仅采取5项的版本

1.接近性:距离、位置相近的元素趋向于一个整体2.相似性:在某一方面(如大小、颜色、形状等)相似的元素具有整体性3.连续性:视觉上是连续的、而不是离散的4.封闭性:构成闭合造型的元素趋向于一个整体5.简单性:具有对称、规则、平滑等特征的元素具有整体性

6.2尼尔森十大可用性原则

6.3设计的四大基础原则

6.4交互设计原则

6.5界面阅读原则

阅读模式,从上到下、从左到右,F模式,Z模式

7.个人能力

7.1专业能力

用户研究:访谈、用户观察、问卷、用户画像、竞品分析等设计理论、方法:心理学、设计原则、用户体验、使用场景、体验地图等用户测试、数据分析:可用性测试、启发式评估、数据埋点、数据基础分析、A/B测试、点击分析、页面分析、漏斗模型用户场景的通用结构是:谁?在什么情况下?想要什么?做了什么?结果如何?他的想法如何?执行能力:多研究竞品,学习别家产品是如何设计的总结能力、管理能力、驱动能力

7.2横向能力

设计地图

安卓720尺寸:

720*1280下:

a、启动图标icon_start:96px*96px

b、操作栏图标icon_operate:64px*64px,内容区:48px*48px

c、小图标/场景图标icon_scene:32px*32px,内容区:24px*24px

d、通知图标icon_notice:48px*48px,内容区:44px*44px

按内容区进行切图,要符合应用市场需要手动调整为正方形尺寸。

720x1280尺寸的设计稿上,字体大小可选择为

36px、特大字体,适用场景:导航栏标题,大按钮。

32px、大号字体,适用场景:列表及表单标题。

28px、中号字体,适用场景:字段标题及内容,输入框中内容。

主要根据文字的重要程度来选择,特殊情况下也可能选择更大或更小的字体。

状态栏高度:50px

导航栏、操作栏高度:96px=48dpx2,屏幕分辨率px=屏幕密度*dp

主菜单栏高度:96px

扫描:采集,匹配

消息数量提示用的点九图片。

用户名,密码作为通知图标:48px*48px,内容区:44px*44px。

复选框,作为场景图标:32px*32px,内容区:24px*24px

桌面图标,要求,不上应用市场没事,若不符合应用市场要求,直接驳回。

安卓桌面图标尺寸:

目前测试机是xhdpi:720px*1280px。

安卓设计分辨率:720px*1280px。

主流手机是xxhdpi:1080px*1920px,1080px*2160px。

1080px手机界面标准:

状态栏:70px导航栏:159px标签栏:144px

标题字体大小:48px~54px

双20年终究还是来了,在前行的脚步中也应该温故知新,就让我跟大家一起来对iOS、Android的设计规范、适配问题做一次全面的梳理和复习吧。以下规范可以多次阅读总结更新。

iOS设计规范

苹果自07年1月9日正式发布iPhone到目前为止的iPhone11ProMax,已经历了十三代产品。19年9月11日推出的11、11Pro、11ProMax并没有新增尺寸,所以对设计师而言也就没有额外新增工作量了,还是按照以前的做法:750*1334px(@2x)或(375*667pt,@1x)做设计稿,再提供@2x、@3x切图。

以下为苹果手机历代产品明细(话说你拥有过那几代产品,欢迎留言交流)

一代:iPhone

二代:iPhone3G

三代:iPhone3GS

四代:iPhone4

五代:iPhone4s

六代:iPhone5

七代:iPhone5s、iPhone5c

八代:iPhone6、iPhone6Plus

九代:iPhone6s、iPhone6sPlus

十代:iPhone7、iPhone7Plus

十一代:iPhone8、iPhone8Plus、iPhoneX

十二代:iPhoneXS、iPhoneXSMax、iPhoneXR

十三代:iPhone11、iPhone11Pro、iPhone11ProMax

如何有效记住iOS设计规范,这里我总结了一个方法“iOS五点两图记忆法”,也就是五个点+两张图。

1、设计尺寸:375x667pt@1x(750x1334px@2x)为基准设计。

2、设计工具:Sketch、AdobeXD、Photoshop

3、预览效果:SketchMirror、AdobeXD或PsPlay

4、切图输出:@2x@3x两套

5、标注工具:蓝湖,摹客

考考你:

1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿?

2、@2倍图被当作@3倍进行开发,会导致什么样的后果?

3、为什么要用375x667pt@1倍图进行设计?(后文也有详细答案哦)

4、iPhone8显示为34px的文字在iPhone11proMax里面是不是也是34px?

这里我们首先重点理解下PX和PT这两个单位,弄清楚为什么建议使用一倍图进行UI设计,才能在设计中以不变应万变。(说明:该部分内容优化自静电老师的总结。公众号@静Design)

PX大家可能比较熟悉,就是像素,英文pixel的简称。最通俗的理解就是找一个放大镜(不是电脑中的放大镜,是真实的放大镜),然后对准自己面前的显示器或者手机屏幕观看,大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为1080x1920px的显示器中,横向分布1920个点,纵向则有1080个点。这些点通过显示器的光学特性,为我们组成不同的图像。

请注意,在不同尺寸的显示器上,这些点的单位面积并不是一样的。比如一台22英寸的1080p液晶显示器与一台27英寸的1080p液晶显示器,可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果,一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。

由此可见,像素这个单位是一个相对单位,不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度,因为1像素只代表一个单位的“点”。

另一个重要单位是PT,英文point的简称,这个单位也是iOS开发过程中使用的单位,与px这样的相对单位不同,PT(Point)是一个绝对单位,中文名字是“磅因(或者磅)”(1PT=1/72英寸)。

请大家记住一点,px是相对单位,pt为绝对单位(类似单位为厘米,毫米等等)。在不确定屏幕密度的情况下,px与pt没有任何可比性。

在开发工程师眼中,你如果使用750px的分辨率作图,那么按原大小标注设计稿中的尺寸的话,他们同样在开发环境中是要换算为一倍尺寸的,比如你标注了字号为40px,那么最终开发工程师写在代码里的就是20pt,除以2的关系。但是呢,如果使用一倍基准分辨率作图,那么就不用除以2啦,所有尺寸开发工程师直接拿过去随取随用。

sketch作为一款纯矢量的移动端ui设计软件,不管是设计还是后期与开发工程师的配合,都严格遵从开发原理,这种设计方法可以最大限度保证设计稿的复现,同时也可以减小文件体积和系统资源消耗,不管是从哪个方面看,都是设计师制作ui界面的明智之选。

最后总结一下原因,设计师使用一倍基准尺寸作图,主要是单位转换方便,输出切图方便,理解简单。对于工程师,他们不用再进行复杂的换算,有助于完美复现设计稿。

我们继续熟悉iOS中一些必不可少的页面规范细则。

一、引导页

引导页是一张完整图,不能适配,因此需要单独出设计图,iOS共需提供6套尺寸,当然也支持视频形式。(目前5以下的适配基本淘汰)

二、图标

注意:最终提交给到程序员的切图是直角,非圆角图标。

设备名称应用图标AppStore图标Spotlight图标设置图标iPhone11P,11PMax,X,Xs,8P,7P,6sP,6P180x180px1024x1024px120x120px87x87pxiPhone11,XR,8,7,6s,6,SE,5s,5c,5,4s,4120x120px1024x1024px80x80px58x58pxiPhone1,3G,3GS57x57px1024x1024px29x29px29x29pxiPadPro12.9,10.5167x167px1024x1024px80x80px58x58pxiPadAir1&2,Mini2&4,3&4152x152px1024x1024px80x80px58x58pxiPad1,2,Mini176x76pxpx1024x1024px40x40px29x29px

其他设备图标尺寸

三、状态栏和导航栏(具体尺寸见五点二图)

导航栏:状态栏下面的区域,含页面标题、功能图标等信息区域。

状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计,也就是加大导航栏的高度,融入页面内容的标题,当内容上滑时,大标题再回归到常规导航高度。(大标题导航栏的高度一般为116pt(232px),这里包括了20pt(40px)状态栏的高度,同时也能放得下34pt(68px)的大标题和辅助信息(如返回等图标)。

导航栏中的元素必须遵守如下几个对齐原则:

1、返回按钮必须在左边对齐。

2、当前界面的标题必须在导航栏正中。(可无)

3、其他控制按钮必须在右边对齐。

四、标签栏(具体尺寸见五点二图)

标签栏:即Tab栏,为底部快速入口,iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。

五、iTunes上传页面

六、字体

中文字体:PingFangSC,英文字体:SFUIText、SFUIDisplay,其中SFUIText适用与小于19pt的文字,SFUIDisplay适用于大于20pt的文字。

七、色彩

在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以,只要符合产品气质并且在色彩心理学理论范围内。官方建议的系统色彩如下:

iPhone的系统色

八、控件

但得注意两件事:第一,点击区域基本符合44pt(88px)原则,也就是在手机上大小大概是7mm-9mm,适合手指点击。第二,要设计操作的不同状态,不要只设计一种状态。

默认控件

控件中无处不在的44pt(88px)

之前我们介绍过,人手指点击区域为7mm-9mm,在@2x中就是44pt(88px)。苹果的导航条、列表、工具栏都充满了44pt(88px)这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。

无处不见的44pt(88px)

九、界面设计原则

1.边距和间距(@2x)

在移动端页面的设计中,页面中元素的边距和间距的设计规范是非常重要的,一个页面是否美观、简洁、通透和边距、间距的设计规范紧密相连。

(1)全局边距(iOS13,@2x)

全局边距是指页面内容到屏幕边缘的距离,整个应用的界面都应该以此来进行规范,以达到页面整体视觉效果的统一。在实际应用中应该根据不同的产品气质采用不同的边距,让边距成为界面的一种设计语言,全局边距的设置可以更好的引导用户竖向向下阅读。还有一种是不留边距,通常被应用在卡片式布局中图片通栏显示,这种图片通栏显示的设置方式,更容易让用户将注意力集中到每个图文的内容本身。

iOS原生态页面“设置”和“通用”页面的边距都是40px。(@2x)

(2)卡片间距

在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,过小的间距会造成用户紧张情绪,使用最多的间距是20px、24px、30px、40px,当然间距也不宜过大,过大的间距会使界面变得松散,间距的颜色设置可以与分割线一致,也可以更浅一些。

以iOS(750*1334px)为例,设置页面卡片间距为70px,而通知中心承载了大量的信息,因此采用了较小的16px作为卡片的间距。

总结:卡片间距的设置是灵活多变的,一定要根据产品的气质和实际需求去设置,平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的,看的多了并融会贯通,卡片间距设置自然会更加合理,更加得心应手。

(3)内容间距

一款APP除了各种栏(状态栏、导航栏、标签栏、工具栏)和控件icon,就是内容了,内容的布局形式多种多样,这里不去探讨内容具体应该如何去布局,我们来说一说内容的间距设置问题。

格式塔邻近性原则:

单个元素之间的相对距离会影响我们的感知,互相靠近的元素看起来属于一组,而那些距离较远的则自动划分组外。来看下图,左图中的圆在水平方向比垂直距离近,那么,我们看到了4排圆点,而右图则看成4列。

在UI设计中内容布局时,一定要重视邻近性原则的运用

2.内容布局

在APP的设计中内容的布局形式多种多样,这里介绍最常用的两种布局形式,列表式布局和卡片式布局。

(1)列表式布局

列表式布局方式非常普遍,随便打开一个APP,基本都存在这种布局方式。特点在于能够在较小的屏幕中显示多条信息,用户通过上下滑动的手势能获得大量的信息反馈。这也是一种非常容易理解的展示形式。

(2)卡片式布局

这种布局形式相对灵活。其特点在于每张卡片的内容和形式相互独立,互不干扰,所以可以在同一个页面中出现不同的卡片承载不同的内容。卡片式布局相对时尚、前卫,很多toC产品经常用到。另外,双栏卡片的布局形式,也常见于以图片信息为主导的App,例如一些商城的商品陈列页面。这种形式能在一屏里显示更多的内容(至少4张),同时,由于分开左右两栏的显示,用户可以更加方便地对比左右两栏卡片的内容。

3.界面图片设计比例

在UI设计中,对于图片的尺寸和比例没有严格的规范,设计师往往凭借经验和感觉设置一个看起来不错的尺寸,但事实上我们是有章可循的。运用科学的手段设置图片的尺寸,可以获得最优的方案,常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618(黄金比例)等。

4.APP版式设计规范

版式设计又叫做版面编辑,即在有限的版面空间里,将版面的构成要素(文字、图片、控件)根据特定的内容进行组合排列。一个优秀的排版要考虑到用户的阅读习惯和设计美感,在UI设计中版面设计的基础原则有哪些呢?

(1)对齐

对齐是贯穿版式设计最基础,最重要的原则之一,它能建立起一种整齐规矩的外观,带给用户有序一致的浏览体验。

(2)对称

(3)分组

物以类聚,人以群分。分组是将同类别的信息组合在一起,直观的呈现在用户面前,这样的设计能够减少用户的认知负担,在移动端界面的设计中最常见的分组方式就是卡片,为用户选择提供专注而又明确的浏览体验。

十、切图命名规范

切图最后需要命名成规范格式,方便程序员查找。切图命名的格式建议全英文,如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后,需要整理切图命名,或在切图之前对图层命名亦可。以下是切图元素的中英文对照:

切图命名对照表

然后我们要按照”功能_类型_名称_状态@倍数”来命名每个切图,比如我们导航条上有一个搜索图标,那么它的名称就是:

navi_icon_search_default@2x.png

(导航_图标_搜索_正常@2x.png)

Android设计规范

一、安卓开发单位是DP、SP

DP:安卓专用长度单位。

以160DPI屏幕为标注,则1DP=1PX

计算公式:dpxdpi/160=px

例:以720x1280px(320dpi)为例,1dpx320dpi/160=2px

SP:安卓专用字体单位。

以160DPI屏幕为标注,则1SP=1PX

计算公式:spxdpi/160=px

例:以720x1280px(320dpi)为例,1spx320dpi/160=2px

二、安卓设计尺寸:以1080x1920px作为设计稿标准尺寸

1.从中间尺寸向上、下适配,界面调整幅度最小,最方便适配。

2.大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

3.用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。

三、安卓图标尺寸

四、安卓字体

中文:思源黑体/NotoSansHan

英文:Roboto

大小:主题文字36-34px正文28-26px提示文字24-22px

五、切图规范

1.切图尺寸必须为双数

2.单像素的图会出现边缘模糊的情况

一般情况下,我们只需要提供3套切图资源就可以满足安卓工程师的适配,分别是HDPI、XHDPI、XXHDPI3套切图资源。

如何用iOS的设计稿适配安卓

现在绝大多数公司限于人力物力的限制,不能把iOS和安卓的设计稿全部执行出来,因此就存在一稿两用的情况;设计师以iOS版本的设计稿来适配安卓,下面我们来看一组有趣的数学换算题:

1080/1.5=720,720/1.5=480,1242*2208/1.15=1080*1920,也就是说,1242*2208(iOS@3倍尺寸)与1080*1920(安卓尺寸)是可以等比缩放的,所以,iOS与Android的尺寸是可共用1242*2208px。因此,以iOS设计尺寸进行设计是可以适配Android的。(前提是必须和安卓工程师沟通清楚)

另一种方式,就是把750×1334px等比例调整尺寸到安卓1080×1920px,对各个控件进行微调,重新提供标注(用dp标注)。也就是需要提供两套标注,一套给iOS,一套给Android。

iOS开发语言

作为iOS开发工程师,最重要的三个工具是:Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言;而Swift开发非常高效。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架,这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中,有许多控件和苹果自带程序是一致的,这就是UIKit的功劳。

iOS开发里单位是pt

750×1334尺寸的换算关系1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。(这也是为什么建议设计师用@1倍图做设计稿的原因)

参考资料及资源下载

苹果开发者中心网址:

苹果人机交互规范:

iOS设计资源下载:

iOS控件下载地址:

设计师必备APP字体包:

屏幕尺寸规范资源:

PS蓝湖插件下载:

SKetch插件下载:

蓝湖手机预览APP下载:

蓝湖自动同步网盘团队协作:

苹果13代产品及iOS设计规范:

苹果手机及平板,最小字体为24px苹方,一般为26px苹方。

苹果pt,安卓dp,文字sp

1.250g白卡纸附膜,30本打印店能制作(彩色打印,墨,CMY三色黑也能接受)。小样品一般纸张,试印三次共三本。

2.宣传册250g白卡纸附膜,100本印刷厂制作(印刷,油,纯色黑,灰,cmy必须都为0,k在0-100之间)。

3.可以要求印刷厂彩色打印而不是印刷,印刷油混合时黑色,灰色若是彩色混合而成会脏,源文件是很深的蓝色,印刷出来可能很浅,印刷抓色不稳,所以对稿时候要求严格。背景灰色必须是单色,不然影响背景上单色的元素。

4.同样都是黑体单色黑比三色黑细。

1.手提袋250g白卡纸附膜,红底比白底贵,本来准备袋子也制作30个的,但是500个起印。

2.cdr中用x,y的坐标值对齐页面中心点。

印刷品常识:

(1)A4印刷品,预设首选项中单位都设置为厘米,但在绘制矩形时候属性仍然显示为像素,只有缩放矩形时候右下角才显示单位为厘米。

1.椭圆工具shift画正圆,复制一份刚画的正圆,alt+shift同心缩小。

2.选择工具的属性栏“显示变换控件”前的勾选中。

3.在圆中心拉水平,垂直辅助线。

4.选中外圆,ctrl+t,放大图,将外圆的水平中心和垂直中心与辅助线对齐。将内圆的水平中心和垂直中心与辅助线对齐。

5.选中两个矢量圆,ctrl+e组合矢量图层。

6.布尔运算去除两圆公共部分。

7.将圆环栅格化,“多边形套索工具”经过圆心进行切割。

说到WUI,管理软件做大了可以称为HIS大数据云服务信息系统。

win10配色:

选中色为图二中深灰色,选中项鼠标移上颜色显示为下图一的蓝色背景,较深蓝色的描边。

图二蓝色是鼠标移上hover显示的颜色,在对比度为70的显示屏上hover蓝色显示不明显。

当聚焦在此电脑,鼠标在“WPS网盘”上右键时,“此电脑”和“WPS网盘”同时变为#cde8ff蓝色。

右键显示菜单的描边色,线颜色不一样,背景色,投影。强对比色在各种显示对比度下都能清晰显示。

下图所示下拉框就是采用win10风格配色,背景色为#eeeeee,深色描边加投影。

win10的图片缩略图有投影,文件夹缩小的窗口挪动可以看到窗口有投影,下图弹框win10风格投影。

行距标准:

1.左侧栏行高60px,文字行距60px,表格中内容行距和表格行高一致。

2.右侧内容区与灰色背景边距10px,右侧标题区50px,正好与左侧栏对齐。

编辑矢量智能对象

1.界面效果图中logo是矢量智能对象,双击后进入logo.psd多图层文件,对矢量图层组进行缩放仍然清晰,若在效果图中对矢量智能对象进行放大会模糊。

2.在PS中绘制矢量图形添加投影效果,群组后右键转化为矢量智能对象,在效果图中使用。

THE END
1.2024不可错过的手机APP设计软件Top10随着技术革新和互联网的迅猛发展、智能设备的普及和消费者对新技术的接受度的提高,用户对 APP 设计的要求也日益提升。而 APP 设计行业的快速发展,也要求设计师们不断更新技术,以满足用户对 APP 高性能和创新体验的期待。但是,面对众多设计软件、资源网站,设计师们是否也不清楚 2024 哪些手机 APP 设计工具是最合适https://js.design/special/article/mobile-app-design-software.html
2.手机平面设计软件排行榜,常用的10款软件推荐!Pixso是一款基于云端操作的新一代协同手机平面设计软件,无需要下载即可在线编辑,内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,提供海量手机平面设计模板和素材,会员每月还可享受上百条设计模板的更新。并且Pixso可以邀请团队成员协作查看、编辑和同步同一项目的信息,支持UI/UX设计师实时异地完成创作和沟通。 https://pixso.cn/designskills/mobile-graphic-design-software-ranking/
3.手机设计图制作软件哪个好用APP推荐豌豆荚手机设计图制作软件哪个好用榜单为您提供最新手机设计图制作软件哪个好用大全,这里不仅有手机设计图制作软件哪个好用安卓版本APP、历史版本应用下载资源,还有类似手机设计图制作软件哪个好用的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/395206/
4.手机设计软件安卓设计软件app安卓设计软件哪个好把你的照片和文字结合起来,创造出美妙的作品!! fonta是一个小的设计工作室,允许你用特殊效果创建独特的图像。“fonta可以为您最喜爱的照片添加时尚的文字”-AppAdvice 在照片http://www.appchina.com/dna/2389
5.糖德app下载安卓手机版 软件介绍 技巧攻略 全部平台 历史版本 标签:设计 介绍 商家经营效率 糖德APP是由厦门鸿宁兴科技有限公司设计与开发的一款商户数字化经营的APP,让传统实体商家通过新兴互联网金融技术实现智慧经营、智能收银、线上开店,帮助商家更好地进行数字化经营转型,助力商家拓展客源、增加销售额。【功能亮点】1.实时https://m.liqucn.com/rj/9189965428818.wml
6.手机端社交软件APP聊天表情设计平面设计二等奖会员名:墨臻品牌设计 商铺地址:http://shop.epwk.com/4125866/ 任务描述:手机客户端软件应用app的即时聊天动态表情一套,一套24张。 产品介绍:手机社交类应用app,受众是18-24岁的年轻人,主应用是即时聊天。 设计要求: 1、形象要求原创,形象活泼,受众对象为18-24岁年龄层的年轻人,有视觉冲击力,需附上创意https://www.epwk.com/anli/pingmian/news_146333.html
7.UI设计APP界面网页界面手机端WAP端PC软件端界面设计ui界面设计交互设计,移动应用设计,网页设计,软件界面设计,平面设计,设计一切与图片有关的项目.https://www.huzhan.com/serve/goods4538.html
8.自适应网页设计的方法(手机端良好的访问体验)### Google网页自适应网页设计指南解析 ### 一、自适应网页设计概念自适应网页设计(Responsive Web Design,简称总之,自适应网页设计不仅提升了用户的浏览体验,还为网站优化和搜索引擎排名带来了诸多好处。 (自适应手机端)APP应用程序官网pbootcms网站模板 App软件落地页网站源码下载 浏览https://download.csdn.net/download/weixin_38703295/12880008
9.手机app开发需要用到哪些软件和工具3. iOS 和 Android 开发者根据设计图还原出来相应的 App 界面 iOS 和 Android 开发者会按设计图根据 App 开发软件(Xcode/Android Studio)提供的视图(组件)在手机端实现设计图效果; 4. 服务端开发者会提供APP要展示的数据 开发软件:PHP 语言用 PhpStorm 等 http://www.apppark.cn/t-37150.html
10.工位预定系统工位预约系统工位预定平台远程预定:打开手机端软件界面,选择需要预定的楼层和区域,用手指直接放大、缩小、拖拉地图,点击地图中黄色空闲座位,填写预定信息即可完成手机端工位预定。 现场预定: 当身处办公区域,急需现场预定工位进行办公,可以立即打开手机端软件,点击扫一扫功能,扫描工位桌面墨水屏上的二维码即可完成预定。 综合屏显示端 综合屏主要https://www.uplussoft.com/gwydxt
11.手机应用软件ui界面设计经典案例推荐Top10Wallet一款能够帮助使用者理财的移动端软件。 设计风格介绍: 软件使用黑色,红色和紫色三种颜色的对比和渐变,极具特色,漂亮时尚。简易图标和多色几何图形,是软件界面更加简洁使用,令人印象深刻。 结语 以上Top10款最新的优秀手机应用软件UI界面设计作品为本期主推的风格。当然,如果是手机移动网页的界面设计,风格其实也可https://www.sumaarts.com/share/589.html
12.手机RF设计技巧AET4. RF仿真软件在手机设计调试中的作用是什么? 答:其目的是在实施设计之前,让设计者对将要设计的产品有一些认识。 5. 在设计手机的PCB时的基本原则是什么? 答:基本原则是使EMC最小化。 6. 手机的硬件构成有RF/ABB/DBB/MCU/PMU,这里的ABB、DBB和PMU等各代表何意? http://www.chinaaet.com/article/42468
13.柜柜App官网用户可以直接通过小程序查看门店案例,设计柜体组合,降低沟通决策成本,提升用户体验 我们的优势 柜柜APP,解决家居行业十大难题 易上手,自动拆单 软件易学上手快,人人能拆单 随时沟通 手机即可做设计,随时随地给客户出方案 核对方案不出错 方案反复核对 一键转发给工厂生产,不出错 https://www.eggrj.com/
14.交互设计论文20篇2.3设计响应式框架我们需要基于移动端框架拓展开发出PC端及平板电脑端框架。首先确定响应模式,那么从手机端显示到平板电脑显示再到PC端显示,整个网站布局如何变化,内容如何编排,优先级如何调整等都是需要设计的部分。同时我们需要对规则继续进行细化,即为定制流体栅格系统(屏幕占比)。 https://www.haoqikan.com/fanwen/21086.html
15.第一个手机端分布式深度学习系统,设计自动化顶会DATE最佳论文【新智元导读】欧洲最大的设计自动化会议 DATE 昨天在瑞士洛桑召开。杜克大学陈怡然教授组关于移动平台深度学习计算的研究荣获嵌入式软件类最佳论文。陈怡然等人提出了本地分布式移动计算系统 MoDNN,让 DNN 能在移动端做并行计算。实验表明,MoDNN 加速 DNN 计算表现良好,展现了 DNN 应用中移动平台的巨大潜力。 https://cloud.tencent.com/developer/article/1075253
16.中国银行手机银行系列客户端软件下载如您需使用我行手机银行英文服务,请扫描下方二维码或者在应用商店搜索“中国银行”,下载我行手机银行客户端并通过首页顶部“版本”按钮切换至英文服务。 三、"中国银行手机银行(境外版)"客户端 "中国银行手机银行(境外版)"客户端是为境外个人客户提供的手机端应用软件(APP)。采用更加国际化的设计,支持多国家、多语言https://www.boc.cn/ebanking/service/cs1/201009/t20100921_1151946.html
17.手机设计图片软件下载手机制图软件简单好用万能图片编辑器,免费制作图片带字,免费图片在线编辑app,很多小伙伴喜欢设计图形图案,但是对于比较专业的设计图片的软件又是比较陌生的,特别是在手机上这样的图片软件就更难知道了,今天腾飞小编带来的是一些手机设计图片软件,将你手机里面的图片进行编辑整合制作和设计,尝试http://www.qqtf.com/k/sjsjtprj/
18.手机app设计软件有哪些手机APP设计,属于移动端UI设计,在不同制作阶段有不同的软件工具,具体包括图像处理软件photoshop、矢量图形制作illustrator、快速原型设计工具AxureRP、UI设计软件Sketch、动效设计软件AfterEffects、https://wap.hxsd.com/wenda/65551/
19.自媒体授权的协议书(通用10篇)3.店铺视觉设计(基础商品上架、产品和店铺视觉设计、搭建手机端店铺) 活动运营: 1.网店营销活动(营销活动建议与策划、站内活动、站外活动、活动分析) 2.整体营销活动(风格定位、店铺分类策略、店铺排版策略、监测店铺数据) 营销推广: 1.直通车优化服务(整店直通车推广方案策划、数据报表反馈、推广商品分析与优化、优https://mip.wenshubang.com/xieyishu/2619621.html
20.手机自建房画图设计软件下载农村自建房画图app手机那么cad类的手机软件自然是各行各业的制图软件首选,毕竟无论是家装设计,建筑工程机械等等都非常适合利用CAD软件,这类软件即可以测量,也可以绘画、设计、批注。下面小编就给大家带来了手机自建房画图设计软件大全,有需求的小伙伴可以来下载体验。 更新时间:2024-12-17 12:54:28共有16款https://www.ddooo.com/zt/macdoudizhu.htm
21.移动端报表怎么设计才好看?我总结了这几种方案手机端呈现的困惑: 手机屏幕小,如何避繁就简,层次清晰的展现出内容 如何让高层管理人员在手机上快速查看到关键信息 千篇一律的流式布局,想要拥有更多布局交互模式 用户对可视化的要求也越来越高,更多地是追求“高颜值”的可视化 3解决方案 本文将简单介绍下如何借助FineReport软件,运用App的设计思路,打造一款随时随地查https://www.finereport.com/knowledge/yddb.html