2017-07-12 20:10:19 sinat_24196195 阅读数 840

不会设计的程序员不是好攻城师

人生最痛苦的是,马上提测了,图不行,加班设计师也不在。于是自学了点 sketch 设计软件。学会了简单的切图,排版。苦于公司的设计都是同步ios,喜欢Android Material Design的设计风格,大腿一拍,说干就干,好赖凑出一幅设计图。

主页(侧滑菜单 + 开播按钮)

inke1.png

向上滚动隐藏部分按钮

inke2.png

侧滑菜单

inke3.png

其实很多细节ios 已经开始抄袭Android了。Android已经出了设计规范很长时间了,无奈成本考虑也好,还是未得到普及,就像Android的系统普及速度一样。b站,网易云音乐有了自己的Android设计,感触颇深啊,觉得说的过去的小伙伴不要吝啬你的赞。

2017-01-06 09:20:26 sugaryaruan 阅读数 1611

简书博客同步更新 传送门

Sketch专为App绘图场景而生,也可以少量处理位图图片。通过下午3个小时的官方用户文档中文版的阅读和实践,我发现Sketch真得做到了“花最少的时间就能上手的绘图工具,让你专注于设计本身”

熟练使用Sketch需要理解一些概念:

  1. 选区
  2. 图层
  3. 群组
  4. 切片: 画布中的特定区域导出为一个文件
  5. 符号(Symbol),类似于布局文件里的标签
  6. 蒙板,这个的作用类似安卓里的SetXfermode方法

刚打开Sketch可以对每个菜单栏下的内容熟悉一遍,Sketch的界面可以分为四个部分

  1. 最左边的Page展示
  2. 顶部的工具栏
  3. 右边的检查器
  4. 中间的画板

我的学习过程就是按着Sketch官方用户手册上的介绍实践了一遍,现在感觉已经能自己修改图标了(要有图片素材),剩下的就是对各种快捷键和绘图小技巧的熟练使用。

注意事项:

  • 当你为 Mac 或网页设计时,你会想打开子像素抗锯齿效果,但是为 iOS 设计时,你会想关掉它。
  • 文字渲染遇到的问题是普通的屏幕里并没有足够多的像素来精确的展现文字的曲线。这就需要用到子像素抗锯齿技术了,它会将那些被文字曲线遮住一部分的像素稍稍变亮一些,并且在视觉上产生更平滑的效果。
  • 顺利实现子像素抗锯齿效果,文本必需出现在一个不透明的(有色的)背景上
  • 实现图层混合模式,Sketch 需要在一个透明背景上渲染所有的图层

一次实践案例

在App设计里,这张图标表示“我的”或“个人中心”,未选中时:

未选中的我的图标

未选中的数据列表图标

当选中时,颜色由灰色变成红色,并且填充颜色头像,看起来有面的即视感:

选中的我的图标

选中的数据列表图标

使用Sketch就能很高效的完成这样的改动,具体使用到的操作在官方用户手册的“图片”分类下和“导出”分类下说明得很到位,本文就不再赘叙了。

小结

这次跨界的感受是在安卓开发过程中,能做到对设计师给的切图心中有数,降低了彼此的沟通成本。加深一种解决问题的认识:实现某种UI显示效果,从代码环节转移到图片处理环节上

参考资料:

Sketch官方用户手册

2016-07-31 23:55:45 afanyusong 阅读数 7474

一套效果图适配全尺寸和标注规范(修订版)

友盟android手机分辨率统计

干货在这里:
这里写图片描述

这跟sketch设计稿和android适配有什么关系呢?
我们再来看一组我计算的数据:

1280*720 除以 2 等于 640 * 360
1920*1080 除以 3 等于 640 * 360
854*480 除以 1.3333 等于 640 * 360
960*540 除以 1.5 等于 640 * 360

这里写图片描述
这也是为什么第一篇文章中sketch的android的画布尺寸要选为360*640,上面的被除数(2,3,1.5,1.3)分别对应的不同手机的分辨率,sketch导出设计图时选择MDPI@1x(dp),然后我们就可以在xml里完美的使用设计图中的dp尺寸值了,完美对应不同分辨率

2017-03-21 15:56:00 anddlecn 阅读数 3126

Sketch静态原型设计

对于静态原型的设计,我们使用Sketch

启动Sketch后,我们将看到类似如下的界面,

 sketch_ui_layout_empty

工具栏

它的顶部是工具栏

 sketch_ui_layout_toolbar

可以通过菜单栏View -> Customize Toolbar...来自定义工具栏。
在弹出的窗口中,将下方的图标拖拽到上方的工具栏中就可以了。

 sketch_customize_tool_bar

导航栏

左边是导航栏,用来展示这个项目拥有的pagepage中包含的详细内容。

page是一张张单独页面,

  • 每个页面上可以放多个手机屏幕的画板:展开、折叠、图标等等;
  • 每个page中的画板都进一步的在导航栏的下半区域展示出来:展开、折叠、图标等等;
  • 多个page被归类到了pages的下面:Weather、 Symbols等等;

我们设计的程序界面,就是某个page

 sketch_page_workspace

工作区域

工作区域显示的是page的详细内容。我们设计的程序界面具体样子,就是通过工作区域展现出来的。

 sketch_ui_layout

属性设置区域

属性设置区域用来设定某个选定图形的属性,例如它的大小、透明度、文字内容、字体颜色等等。

 sketch_layout_property_settings

添加设备画板

在新建的 Sketch项目中,双击导航栏page1,把页面的名字改成一个有意义的名字-Weathear

 sketch_page_rename

通过工具栏Insert -> Artboard,调出画板,选择Material Design下的Mobile Portrait

 sketch_add_artboard

通过右侧的属性设置区域,可以看到这个画板的大小为360px*640px,正好是一个mdpi的安卓设备屏幕尺寸。所以我们在这样的尺寸上做设计,能够很容易的顾及到其他像素密度的设备。

可以看到Sketch为多种界面提供了默认的尺寸,iphone的,安卓设备的,网页的,MacOS应用的,可以说是应有尽有。这也说明Sketch就是为了这些产品而设计出来的。

 sketch_artboard

除了使用菜单栏调出画板,你也可以使用快捷方式:A。这也是操作Sketch必须记住的快捷方式之一。


本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。

如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。


同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯,相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对安豆的支持,谢谢:)

2019-02-22 09:54:21 u014608640 阅读数 69

sketch-smooth-corner-android

项目地址:MartinRGB/sketch-smooth-corner-android 

简介:A android project explained how to draw sketch smooth corner in android canvas

更多:作者   提 Bug   

标签:

 

1:1 实现 UI 设计师使用 Sketch 时候更为喜欢的 平滑圆角 的绘制算法,自定义 View | Layout | Drawable 需提取绘制函数重写绘制方法


An android project explained how to draw Sketch's smooth corner in Android Canvas.

You can customize drawing function in your custom view n' achieve cool animation effect.

Also you can try it in this web demo —— compare uploaded image with effect in Web Canvas

APK download

See in release page

Parameter comparison

If the round radius is bigger than 90% of the shortest edge ,there will be tiny difference between real value in Sketch and the output value in Andoird (But in that case,I would use Round Corners)

parameters

Gifs

gif1 gif2 

Android — jimu Mirror

阅读数 1400

没有更多推荐了,返回首页