-
用户画像及其源文件——软件架构
什么是用户画像以下是百度百科的解释:用户画像又称用户角色,作为一种勾画目标用户、联系用户诉求与设计方向的有效工具,用户画像在各领域得到了广泛的应用。我们在实际操作的过程中往往会以最为浅显和贴近生活的话语将用户的属性、行为与期待联结起来。作为实际用户的虚拟代表,用户画像所形成的用户角色并不是脱离产品和市场之外所构建出来的,形成的用户角色需要有代表性能代表产品的主要受众和目标群体。更多的介绍大伙可以直接百度百科去进行一些官方概念的了解,本文从实际的工作角度出发,看用户画像在实际的工作中有什么作用以及包含哪些内容。为什么要做用户画像在一个阶段之内,作为设计师,以为自己跟PM聊了之后很了解目标用户是谁。But,现实中的坑在于,有时候PM自己也不清晰用户画像,他可能自己意识到了这点,但处于产品初级阶段,只能靠慢慢摸索来清晰目标用户;也有可能PM自己也没意识到,导致后来不止是设计师,连开发、QA,或者后来更多的品牌树立和宣传等等部门,都对目标用户很模糊,或者每个人所理解的目标用户都不太一样,导致每个人在思考的过程中,所用的力打到的不是同一处。直面的问题就是,感觉设计方案有好几种处理方式,但哪个是最优解,不知道!而方案的确定,很大程度上取决于产品的目标用户是谁,以及相应引发的后续思考。所以,做用户画像,是为了让团队内部有个共同的清晰的目标用户,达成目标上的一致,减少决策成本。不会出现产品经理认为用户是男的,方案应该干脆利落;而设计师认为用户是女的,然后设计出来的产品全是粉粉嫩嫩的场面。当然,这只是开个玩笑。做完整的用户画像是一件耗时耗力的事,但如果产品处于初期阶段,建议用一张可视化的图片或者信息墙进行展示就行。如果产品已经稳定,就可以开始后面的与用研童鞋配合,进行量化调查以及进一步的用户角色的制定。此篇文章,先讲述初期的用户画像。用户画像包含哪些内容?照片:搜索一张最符合目标用户形象的图片贴上去一句话表述:能代表目标用户主要性格的一句话。基本信息:年龄、职业、用户来源(获取用户的渠道)、地区、性别、婚姻状况主目标或者需求:即用户来到这里可以为他带来哪些好处,或者说他可以达到什么样的目的。可能遇到的挫折或者担忧:在用户达到目的的过程中,可能遇到哪些阻碍,或者产品因为人力、技术等原因暂时达不到的效果性格描述:用户是内/外向、逻辑/感性的人或者其它性格描述产品使用的背后的故事以及主场景:期望用户是在哪些场景下使用得最多
-
Web端设计组件,反馈类——软件架构
设计规范中最重要的部分就是组件规范了,制定组件的规范有哪些好处呢?1.高效简单:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建web端界面,高效无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。2.统一用户体验:由于使用了统一的组件规范,所以保证了的视觉和交互设计统一性,保证整体的用户体验性。3.提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。根据组件的用途,可以分为六大类:Feedback反馈、from表单、basic基础、data数据、navigation导航、other其他。本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。toast定义:用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。使用场景:1.可提供成功、警告或错误等反馈信息。2.顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。toast的消息提示分类一共有三种类型:成功类、失败类、常规类。组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。alert警示提示定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。使用场景:1.当某个页面需要向用户显示警告的信息时。2.非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。例如淘宝购物车,删除之后,会出现alert警示提示,淘宝的例子属于alert的变种,用户可以点击“撤销本次删除”进行还原之前的毁灭性操作。alert警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有icon操作,含有icon操作的话警示性会更强。alert警示组件样式有两种:带有删除操作,不带有删除操作。dialog对话框定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。使用场景:1.用户在进行重要操作的时,需要进行二次确认。2.用于重要的反馈提示,让用户知道信息提示。3.承载少量的表单填写类,减少页面的跳转。windows系统的确定按钮一般在左边,而MacOS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。Notification通知提醒框定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等使用场景:1.较为复杂的通知内容。2.带有交互的通知,给出用户下一步的行动点。3.系统主动推送。Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。tooltip文字提示定义:简单轻量的的文字提示。使用场景:1.鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。2.常用于解释操作按钮的文字说明。还有一种tooltip是浏览器自带的,浏览器自带的和本篇的tooltip的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的tooltip鼠标移入就出现,切组件风格和浏览器自带完全不一样。tooltip组件按照需要解释说明的对象位置不同,可以有以下不同的样式。
-
一篇文章彻底学会用keynote做交互动效原型——软件架构
为什么说通过这一篇文章就能彻底学会呢?我这是一篇是如何学会keynote做交互动效原型的最短路径。学习起来就只需要两步。第一步:看完许岑老师的keynote视频教程,简单易懂,看起来也很愉悦。推荐给大家,第二步:通过我这个视频的源文件和教程学习,即可学会如何keynote做交互动效原型;以下为keynote动效教程:
-
高级渲染技巧——软件架构
学习渲染器的方法和顺序一直都很多人问我,初学者应该如何选择和学习渲染器,我的建议是,无论是学习哪一种插件的渲染器,都应该从最初的渲染原理入手,了解灯光是如何设置的,比如我们常用的三点布光法、常用灯光的使用、常用材质的使用,以及今天将主要讲述的物理天空的使用等,你都需要先了解这些基本的原理,再选择对应的渲染器。即从默认渲染器入手,了解以上原理后,再根据自身目标深入学习其他渲染器。在选择渲染器的时候,要搞清楚是否需要使用“节点材质”:如果需要使用“节点材质”,我推荐使用阿洛德或者OC,阿洛德的优点在于:它是电影工业的标准、全能型的渲染器,WIN及MAC系统通用,缺点是比较难学;OC相对来说,预设比较多,它的柔光和置换功能比较出色,目前只支持N卡,MAC用户需要使用外接显卡。*MAXON发布的最新版本C4DR20已经开始全面使用“节点材质”,所以“节点材质”应该会是一个趋势。C4DR20计划于2018年9月上市。如果不需要使用“节点材质”,除了使用物理渲染器(R19或以下版本)之外,我推荐使用VR渲染器。VR渲染器的优点在于有较多的预设,它结合3Dmax是室内设计、园林(植物)设计的标准。结合C4D的话效果也是不错的。在使用VR的时候,有很多细节是要掌握的,比如,它的自发光是需要打开材质的“直接照明”。由于它的自发光和反射的渲染速度相对较慢,我们常用“区域光”来弥补它的不足。比如,在VR里如果需要自发光的效果,我们一般不使用材质的“直接照明”,而是使用区域光,在“区域类型”选择网格,在“灯光网格-几何”将需要自发光的物体放进去,它的渲染速度就可以提升。第二,可以配合TeamRender进行渲染,即联机渲染的技巧,以后会以另写文章进行详细介绍。无论你选择学习哪款渲染器,我想引用之前,在原创文章《纯干货:种梦C4D宝典——高级材质渲染案例(三)》中提到的,成功是没有捷径的,在设计学习过程中,必须”平面基础”、“软件使用(三维)”和“品牌思维”三位一体地相互结合来学习。在三者中,“平面基础”是最基本的,软件使用(三维)和品牌思维是你的“加分项”,而在三维软件的使用中,有很多关键的学习点,而“渲染”是必须学会的,当然建模和运动图形的基础操作也是十分重要,当平面基础和渲染都学会了,你才能设计出具有设计感的作品,也就是说熟练了掌握以上两点,即时只用最简单的图形,你也能轻松做出,出色的作品。再次强调,千万不要盲目跟风使用所谓的流行渲染器,找到自己适合的渲染器才是最重要的。要知道,渲染器的渲染原理都是一致的,建议深入学习其中一种即可,因为其他都是大同小异的。一、何为物理天空?“物理天空”即模拟一个真实的天空环境,其他渲染器如VR、阿洛德、OC、CORONA分别都有物理天空,功能和操作原理都是大同小异的。默认渲染器——物理天空VR可以直接打开物理天空,然后修改参数,要配合烟雾的话,可配合使用“体积”材质,如使用最新3.6版本的话可以直接导入VDB开源烟雾文件;VR渲染器——物理天空阿洛德可以使用“天空”,或直接选择物理天空,导入贴图、材质来控制,OC和CORONA也是类似的,我就不一一介绍了。如果你是C4D初学者,按我的建议,举一反三地学习,这样效果会比较好。阿洛德渲染器——物理天空CORONA渲染器——物理天空二、实际案例分析打开默认渲染器的物理天空,默认打开多个面板:基础、坐标、时间与区域、天空、太阳、细节等。这里我会具体分为三个案例进行详细介绍。1、“清晨”案例“清晨”案例最终效果图基础(面板):在功能选项中点选“大气”,即增加“大气”面板。坐标:可相对地调整到一个你想要的理想角度,也可以不作调整。时间与区域:设置需要的时间,如早上7点30分。天空:最重要的设置是地球的半径,可以把地球半径设为10。原理是:地球的半径越小,体积云分散的球形越多,质感会更强烈。太阳:通过调节时间与区域来控制,只需要把Gamma修正设为1.2,将尺寸比率调大,并打开镜头光斑,记得打开渲染设置-效果-镜头光斑,产生镜头光斑哦。大气:按我提供的这个比率来调整即可,把大气的强度减少。细节:云层的影响和强度调大,使画面质感更强烈些。渲染:使用物理渲染,可参考《纯干货:种梦C4D宝典——高级材质渲染案例(一)》、《纯干货:种梦C4D宝典——高级材质渲染案例(二)》。加入后期:导出PSD后使用PS(CR)进行处理。2、“傍晚”案例“傍晚”案例最终效果图基础(面板):在功能选项中点选新增“大气”和“云”两个面板。坐标:可相对地调整到一个你想要的理想角度,也可以不作调整。时间与区域:这是最重要的,需要设置具体的时间。天空:设置地平线起点,默认是0度的,你可以进行正负值调整。可以理解为,调整地球的角度,呈现天空的不同效果。太阳:可以把尺寸比率调大,距离缩放可以调大,而在这里镜头光斑是不需要的。大气:将地平线渐隐设为100%,强度50%即可(可右键查看帮助文件,了解地平线渐隐设为100%的效果说明)。云:使用“消散”图层,其他图层就不需要了。细节:“合并天空与太阳”选项打勾即可。渲染:使用物理渲染,可参考《纯干货:种梦C4D宝典——高级材质渲染案例(一)》、《纯干货:种梦C4D宝典——高级材质渲染案例(二)》。加入后期:导出PSD后使用PS(CR)进行处理。3、烟雾效果(清晨和傍晚)案例“清晨烟雾”案例最终效果图基础(面板):在功能选项中点选新增“烟雾”面板。时间与区域:根据具体情况设置时间,如选择清晨5点。云:分别设置3个图层的云效果。烟雾:设置烟雾的颜色,如白色的烟雾;高度的最大距离可以缩小,密度150或以上,可以选择不同的噪波的模式。渲染:使用物理渲染,可参考《纯干货:种梦C4D宝典——高级材质渲染案例(一)》、《纯干货:种梦C4D宝典——高级材质渲染案例(二)》。加入后期:导出PSD后使用PS(CR)进行处理。“傍晚烟雾”案例最终效果图基础(面板):在功能选项中点选新增“烟雾”面板。时间与区域:根据具体情况设置时间,如选择傍晚18点。云:分别设置2个图层的云效果。烟雾:设置烟雾的颜色,如橙色的烟雾;高度可将最大距离可以缩小,密度250或以上,可以选择你想要的噪波的模式,其他设置基本同上,这里就不一一赘述了。渲染:使用物理渲染,可参考《纯干货:种梦C4D宝典——高级材质渲染案例(一)》、《纯干货:种梦C4D宝典——高级材质渲染案例(二)》。加入后期:导出PSD后使用PS(CR)进行处理。总结关于物理天空的设置,最重要的功能效果都可以在物理天空中的基础面板点选新增,设置时间是很重要的,清晨、中午、傍晚、夜晚都可以通过设定时间来完成设置,另外,在基础面板中可代入天空预设或天气预制。补充说明:在物理天空可以使用云绘制工具来画出一些云,比如一些卡通的云或者特殊效果等。希望这篇文章能对大家有一定的启发,在学习其他渲染器的时候可以举一反三,因为各种渲染器都是很类似的。我是种梦TOMMY,仅此而已。
-
导航类设计组件——软件架构
根据组件的用途,可以分为六大类:Feedback反馈、form表单、basic基础、data数据、navigation导航、other其他。导航系统相当于整个网站的主架构,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。NavMenu导航菜单定义:将网站的信息架构分组归类并以导航的形式展示给用户,方便用户查找所要获取的信息。使用场景:1.需要提供一个流量分发的入口时2.网站各个功能聚合时例如,拉钩网顶部导航,分为首页、公司、校园、言职。顶部导航:顾名思义导航在顶部,这也是目前网站最常见的主导航模式。顶部导航一般会含有个人中心。如果导航里面存在二级导航则可以聚合在下拉菜单里面,鼠标hover出现下拉菜单,选择下拉菜单里面的选项,则导航栏的标题变为对应选择的导航标题。侧边栏导航:多用于二级导航。侧边栏导航里面的功能一般会进行分组,一般默认展示出来。为了节省内容区域空间,有的侧边栏会提供点击收起左侧栏功能。侧边栏的一级标题根据是否有承载的页面,如果没有的话,通常置灰,点击无交互事件。混合式导航:一般用于复杂的多类目的网站结构。鼠标hover一级分类,出现对应的下一级分类。Breadcrumb面包屑定义:显示当前页面在系统层级导航中的结构和层级,并能进入各个路径结构的导航。使用场景:1.当系统拥有超过两级以上的层级结构时;2.告诉用户所处于的层级关系;3.灵活的在各个路径层级中切换例如美团web,通过北京美食进入某一个产品的详情页,就出现如下图的面包屑导航。基本样式:这是是常见的面包屑样式。主要使用场景是针对于路径较短。超长路径情况:全路径很长,需要收起,用三个点表示,点击三个点可展开全部。Tabs标签页定义:并列层级切换的导航组件使用场景:1.非主导航2.切换页面视图3.并列层级切换的小导航类例如美团网站后台的我的订单,tabs标签页,用户可以快速的进行切换不同导航下的视图。基本样式:有含icon和不含icon两类。含有icon则导航的视觉感知更明显。侧边栏样式:这种可定位页面内容,即点击图中的标签页2则页面固定到标签页2的内容,也可以用于在不同视图的切换。pagination分页定义:用于列表、feed流分步加载的组件使用场景:1.信息量过大,加载时间过长时2.进行快速切换其他加载部分的组件例如百度搜索,底部就有分页组件,有了分页组件,不需要一次性把所有的信息全部加载拉出,提升产品的性能,同时用户可以在不同部分的信息进行切换,高效快捷。基本样式:分页组件中最简单的样式,通过点击页码、上一页和下一页完成切换。当在第一页时,没有上一页操作。保持分页有6个跳转页,同时选中态的页保持在第2个。跳转样式:和基础样式唯一的不同是增加了输入页数跳转,同时处于第1页时上一页置灰。自定义页面列表样式:可以自定义一个页面的列表可以展示多少条steps步骤条定义:引导用户按照流程完成任务的导航条。使用场景:1.复杂任务需要分拆步骤时2.不低于两步横向样式:适用于多个步骤的业务场景。纵向样式:适用于较多步骤的业务场景。dropdown下拉菜单定义:将功能入口聚合并隐藏,通过下拉菜单调出。使用场景:1.操作聚合2.功能入口隐藏,点击或者hover出现鼠标hover出现下拉菜单样式,点击下拉菜单里面的选项,进入对应选项的界面。
-
作品不够优秀?软件架构了解一下
很多人抱怨自己的作品不够优秀,但是真正让自己找问题时又不知从哪下手,从何找起!听到最多的话就是:总感觉自己作品哪里不舒服,很奇怪?这就等于考试时做完试卷明知有错误,却不会检查!本期的内容就是:通过设计中一些规范常识问题,重新审视自己作品,从中发现作品问题是否因为规范性问题所导致,提供更多审查的思路,提升作品质量!对齐原则是设计的基础知识,也是恒久不变的设计规范,基础并不代表不重要;对齐的目的:对齐过程就是对视觉元素进行规整的过程,它可以很好的将原本互不相关的元素在视觉上建立联系,形成一条看不到的视觉线;对齐也可以在一定程度上避免画面杂乱的问题;所以当我们在审查作品时,对齐原则就是我们首先要考虑的问题,分析画面中各个视觉元素的对齐问题,哪些需要对齐?以何种方式对齐?——左对齐、右对齐、居中对齐!分组的概念无论是在页面布局还是文字编排中都是很重要的,分组就是将一个大结构分成不同的小组,在视觉上划分层次,分组的目的:将文案信息通过分组的概念进行拆分,有利于文案信息的传达及可读性的提升,当文案信息多的时候,可以酌情分为两组、三组的形式;在页面设计中,分组的概念就是划分模块、分割整体!当我们在审查作品时,充分考虑是否将分组的概念运用好是必须的,无论是在文字编排还是页面设计时,时刻要有分组的意识,它可以很好提升整体的可读性和视觉层次,这也是一个优秀作品所必备的!在设计作品中,对于主次视觉形象的体现是非常重要的,我们很多时候会犯的问题是:感觉所有的元素都想突出,这会导致画面因视觉信息太多而杂乱,非但没有很多的突出主体,反而因为周围元素没有弱化而抢了主体;一般主次关系的体现最直观的手法就是通过对比,无论是大小、粗细、色彩等等的形式,目的都是降低次要元素对于主体的影响、提升主体视觉注意力,从而更加鲜明的提升画面主次关系;没有主次关系的画面会给人一种画面单薄的感觉,因为整个画面没有一个点是可以充分吸引用户的,视觉没有着落点;反之,主次关系明确会提升画面的视觉冲击力,增强整体信息传达力。所以画面主次关系的明确程度也是审查作品时要考虑的因素之一!留白一直是被很多人所诟病的一个问题,留白并不是一味的只要产品和文字,这里所说的留白是基于画面整体考虑的,比如:当画面给人一种很密集甚至有种压迫感的时候,就要考虑留白的问题,那么如何留白呢?留白不仅仅是将多余元素删除,留下空白区域,还可以通过减弱其他视觉元素的形式体现留白;反之一样,当整体给人一种空、毫无内容的时候,就可以通过添加视觉元素的形式减少留白范围,从而将画面更丰富、有内容!留白的多少无法给到一个公式,要结合画面整体的感觉来确定是否在留白上存在问题!字体形式也是考虑的因素之一,因为每款字体所传递出来的视觉感受各有不同,字体对于整体影响也是不可忽略的,比如:很男性化的整体用了一款很女性化的字体,就会给人一种“带着女朋友去菜市场买钻戒的感觉”,难以接受!合适的字体能够将画面整体形象提上一个档次;比如:偏男性化的作品可以选用一些比较粗狂、尖锐的字体;女性化的可以选一些宋体或者纤细的字体;儿童类的选用一些俏皮、可爱、圆润的字体等等;另外注意,英文和数字尽量选用英文字体;这些问题也要时刻提醒自己要注意!这里要说的就是在审查作品时要分析画面中的素材选用是否得当,是否有所依据;很多人选素材容易脱离主题,当我们在选取素材时一定要结合整体,而不是单纯的只看素材本身的美观度;且素材尽量高清、无白边(除需要模糊处理的);当一个模糊、有白边的素材出现画面时,会大大影响画面整体的美观度和设计感,会给人一种不专业的感觉,很多新人会出现这个问题,那么现在你可以看下之前自己的作品,是否存在这样的素材在画面上!配色问题是恒久不变的热门话题,保险的配色方式是:画面整体不超过三种色相,且尽量出现主色、辅助色和点缀色!这是常用的配色方式,但不是唯一的,还要考虑颜色的属性是否起到给画面整体加分的作用,配色要跟着整体的风格、感觉进行,而不是漫无目的;当我们审查作品时,要考虑整体色调是否与主题相吻合!选用这个颜色的依据是什么?最后,不可忽略的是画面的整体性,也就是审查整体,也就是各个模块的衔接程度,画面是否具有整体性,有没有视觉断层的表现;有效避免视觉断层常用手法就是:让每个模块之间存在一定视觉元素的关联性、延展性、互相作用,这样就能很好的避免画面整体性不强的问题!当我们不会找作品问题时,不妨试试以上几种方法,逐一分析寻找不足,审查作品就等于是考试时检查试卷一样,它无法通过这个动作让你从50分的水平提升到90分,但是它可以让你的作品更加优秀,细节决定成败!无论是审查自己的作品还是评判别人的,都可以用这几点作为切入点,通过分析优化我们的作品质量!
-
软键盘/虚拟键盘控件——软件架构
鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。SoftKeyboard(VirtualKeyboard/软键盘/虚拟键盘)并不是真实的物理键盘(PhysicalKeyboard),而是在屏幕内拥有键盘样式和功能的控件,它比真正的键盘尺寸更小,而且没有手感很难盲操作。在触屏当道的移动端SoftKeyboard也可以简称为Keyboard。如何使用SoftKeyboard具备屏幕内的控件的特性——按需随时改变样式和位置。合理的运用这一特性可以创造独特的优势。选择适当的键盘类型在某个场景下,用户输入的内容类型往往是有限的,某些键盘按键可能完全用不到,保留所有按键不仅浪费移动端珍贵的屏幕空间,多余的选择也降低了用户输入的效率。使用恰当的键盘类型不仅提升输入体验,而且能增强服务器提交数据的校验安全性。iOS、Android提供多种键盘类型布局,常用的键盘类型布局有:1.默认键盘:常规的全键盘,不做任何限制。2.文本键盘:相比默认键盘取消了表情符号,适合输入密码。3.整数键盘:只能输入数字0-9。4.浮点数键盘:在整数键盘基础上增加了小数点。5.电话号码键盘:在数字键盘基础上增加了“*”和“#”。6.邮箱地址键盘:在常规全键盘基础上增加了“@”和“.”。7.URL键盘:输入网址用的,在常规全键盘上增加或突出“.com”、“.”和“/”等。8.数字和符号键盘:相比数字键盘多了很多标点符号。某种程度上来说,Picker可以被当做特殊的键盘类型。此外还可以对键盘的:是否首字母大写、所有字母大写、单词自动补全等参数进行定制,进一步提升效率和体验。定制动作按键的功能键盘上除了输入内容的按键,还有另外一类功能按键。例如在PC端Tab键可以在表单内的多个输入框之间切换,回车键可以换行或者发送内容。SoftKeyboard可以对动作键的具体功能进行定制,常见的定制功能有:1.回车(return/enter)。用来换行。2.搜索(search)。点击后执行搜索动作。3.下一项(next)。通常用在在多个输入框的表单中切换到下一个输入框。4.发送(send)。一般用在通讯App中将内容发送出去。5.前往(go)。任务过程中到下一个步骤的动作,例如输入网址后,前往打开的网页。6.完成(done)。任务完成后终结动作。例如表单提交。自定义键盘假如用户使用第三方输入法就有些悲剧了,第三方的SoftKeyboard不一定完美支持所有键盘类型和动作按键的定制,而且有私自收集数据造成隐私泄露的风险。假如对第三方键盘担忧,或者对输入内容的类型有偏好,可以设计自定义键盘。自定义键盘分为App内输入视图(InputViews)和系统级定制键盘两种。App内输入视图是私有定制的,只能在所属的App内使用,不可被其他App或者系统使用。典型案例是iPad版NumbersApp,不同数据类型的表格单元格所对应的输入视图也不同,而且还提供简单的数据运算功能。系统级定制键盘可以在系统和所有App全局使用,搜狗、讯飞等第三方输入法就属于这种。iOS可通过SoftKeyboard的“地球”icon切换不同的系统级定制键盘。由国内iOS开发者钟颖(微博昵称@StackOverflowError)研发的Pin提供了一种特殊的系统级定制键盘,通过Pin的键盘可以快速粘贴曾经的剪贴板记录甚至同步Mac的剪贴板内容,还提供对剪贴板内容执行搜索、分词的功能。不要遮挡当前获得焦点输入框在移动端,SoftKeyboard约占五分之二的屏幕面积,这意味着SoftKeyboard在唤起前后,界面布局会产生很大的变化,因此要注意键盘唤起后界面元素位置的变化,不要让键盘遮挡当前获取焦点的输入框,以免用户看不到自己输入的内容。相关资料网易UEDC对键盘类型和动作按键的研究和分享iOS共提供11种键盘类型,Android甚至对键盘有多达29种参数定制。网易UEDC(用户体验设计中心)对iOS和Android的键盘进行了系统的研究,提供详细的使用指南和Axure元件库分享。请阅读:《交互稿中「键盘类型」的标注》《深度基础|交互中的Android键盘详解》iPad拆分键盘移动设备横屏情况下宽度太大,用户手指很难触及到屏幕中线,而且SoftKeyboard会占用过多的纵向屏幕空间,导致操作和显示都非常不便。当你用两指同时向左右拉iPad的软键盘时,键盘就会被拆分,这样能提供更多的内容显示面积,操作也变得更顺利。为什么银行App要使用乱序键位键盘在PC时代,有木马病毒通过监控物理键盘的键位来盗取用户密码,注重安全的银行网站将密码输入改为软键盘。正所谓道高一尺魔高一丈,新的木马病毒记录屏幕鼠标点击位置来推算用户输入的内容,于是银行将软键盘升级为乱序键位。银行将这项安全技术从网站照搬到了App里,事实上,在触屏手机上使用乱序软键盘意义不大,不仅极大降低了用户输入效率,木马悄悄截屏或者手机使用者背后有人即可轻易截取密码。可喜的是陆续有银行App采取禁止截图和使用手势密码或指纹等更快更安全的安全技术。大屏手机的键盘单手操作优化现在的手机屏幕尺寸越来越大,单手操作键盘会非常费力,有不少手机厂商和第三方输入法致力于改善这个问题,例如搜狗输入法单手键盘,将键盘宽度压缩至适合单手操作的位置。更为创新的方案是联想的水银键盘,当手机向一侧倾斜时,通过重力感应水银键盘的按键会将键盘按钮向倾斜的方向集中,最远处的按钮触摸区域更大,拇指可以轻松触及。
-
9大设计神器推荐
-
Painter如何手绘写意秀美头像
1.打开painter8软件,按【ctrl+n】的组合键新建一个空白文件,设置合适的分辨率和图像尺寸。按【ctrl+4】的组合键打开【layers】(图层面板),新建一个图层命名为sketch,设置为【multiply】(正片叠底)。(图1.1所示)按【b】键切换到笔刷工具,选择【pencils】/【2bpencil】(铅笔/2b铅笔)的笔刷变体,在【colors】(颜色面板中选择一种中等的灰色,绘制整体的白描稿。(图1.2所示)由于wacomintuos2数位板完全支持painter软件里的笔刷,因此1024级的压感功能可以让2b铅笔的绘画效果与纸上毫无二致。2.新建一层命名为line。3.选用黑色,选用【calligraphy】/【dryink】(书法笔/干墨笔)的笔刷变体,在line的图层上进行墨稿的绘制加工。写意风格的国画有很多表达方式,这里我们还是用比较保守的画法,先用墨线来立骨。【dryink】变体的感觉非常像传统的干毛笔,而且笔触的变化跟运笔的压力大小关系很大,特别是配合使用了intuos2数位板以后,由于intuos2可以自动识别我们运笔的角度和笔锋,更能把【dryink】的笔刷特性发挥得淋漓尽致。4.再新建一个图层colorize。5.选用【diditalwatercolor】/【coarsemopbrush】(数码水彩/粗糙涂抹水笔)的笔刷变体,在colorize的图层上进行脸部的薄涂上色。【coarsemopbrush】的笔触有些渗化的边缘外观,很像宣纸上的毛笔染色效果6.继续用【coarsemopbrush】的笔刷画出头发的体积关系,注意用笔的角度和头发的整体走势一致。7.用偏赭石的暖色,画出头发受光部分的笔触,这样头发的颜色有了一定的冷暖对比,会显得更加丰富、生动。8.画出衣服的笔触色彩,为了突出肤色的红润,这里采用了绿色作为衣服的主体色彩。为了表现衣服的轻薄质感,按住alt键吸取颈部的肤色,在衣服上随意画上几笔,作为透明质感的暗示。9.保存rif格式的副本文件,点击图层面板的关联菜单,执行【dropall】的指令合并所有图层。10.在【papers】(纸纹面板)里找到【ribbedpastel】的纸纹(这个纸纹是painter6纸纹库里面的。)把纸纹的缩放比例改为30%。11.执行【effects】/【surfacecontrol】/【applysurfacetexture】(效果/表面控制/运用表面纹理)的菜单命令。12.在【applysurfacetexture】的对话框中设定using的选项为paper,shine的数值改为0,amount的数值调节为12%左右。这样整个画面就会被添加上一层自然的纸纹效果。(图12.1和图12.2所示)本例示范了如何用painter8绘制国画写意风格的人物肖像的技法。写意的画法更加讲究气势和随意性,不拘泥于局部的笔墨,而是追求整体畅快的感觉。写意的用笔更加简练,电脑绘制写意风格的国画,除了选择合适的笔刷之外,intuos2数位板的重要性更加不言而喻,因为鼠标或者512级压感的数位板是没有这么丰富的压力感应和笔锋识别的功能的。当然你还可以添加自己喜欢的背景来渲染整体的气氛。电脑绘画的好处就是图层和灵活的撤销指令,你不必担心会画坏一张图,这个是纸上绘画无法比拟的优越性。
-
设计圈实用软件
这个合集包含了不同国家所使用的标准的纸张尺寸,对于前端、设计师和开发者而言,这些资源在特定的时候非常的有用。5月份的设计圈干货大合集来了!相比以往,这个月合集中的素材和工具大都以轻量级而著称,能够更加有效地提升你的工作效率,帮你事半功倍地完成设计。本月的干货几乎全都是免费的,除了几个新款的高素质字体。PAPERSIZES如果你想确切知道某种类型纸张的尺寸,那么这个网站能够很好地帮到你。这个合集包含了不同国家所使用的标准的纸张尺寸,对于前端、设计师和开发者而言,这些资源在特定的时候非常的有用。SCREENSHOTDESIGNER每一款应用提交到软件商店的时候,都需要提供相应的截图,让用户能够对你的应用有所了解,而这款ScreenshotDesigner就能帮你挑选截图、选取合适的模板、快速添加文本介绍等。BREAKLOCKBreakLock是一款类似Android屏幕解锁的有趣游戏,这款游戏非常耐玩儿,你可以在这个游戏上耗上一整个下午也不觉得腻味。FRAMERFramer是一款“为了让工作更简单更智能而帮你从画布中分离代码”的工具。根据开发者所说,这款新工具专注于构建区块,并且让代码在后台自动构建。CODECOPYCodeCopy终于满足了大家的需求,给我们提供了这样一个浏览器插件:将任意代码片段复制到剪切板当中。这款插件有谷歌浏览器和火狐浏览器两个版本。ESSENTIALICONCOLLECTION这个图标合集包含了500个免费的图标,这些图标均是可以个人使用和商用的。这些图标风格都相对圆润柔和,并且都是在32像素的栅格上完成设计,无论是移动端设备还是网页项目都可以适用。ILLUSION.AIIllusion.ai是一个可以嵌入到网页中的对话式聊天界面,它可以让你的界面拥有更加有趣、人性化的服务方式。BOTSTOREBotStore是一个包含大量现有聊天机器人的在线目录,你可以在这里寻找并下载各种不同类型的在线聊天机器人,帮你完善你的设计项目。BRUSHABILITYBrushability是由9款字体组成的字体合集,其中这9款字体囊括了最常用的英文字体类型,包括衬线体、非衬线体、手写体等等等等。COCOGOTHICCocoGothic和Futura这样的早期复古几何非衬线体字体是同时代的存在,它有六个不同的字重,搭配有相应的斜体,并有完整的拓展字符集,包含完整的西文字符集,可以帮你应对多数的需要英文字符的设计场合。KUMUKuma是一款有趣的、泡泡样式的展示性字体,如果你正在寻找一款新颖有趣的英文字体,那么Kuma可以帮到你。ZOONHOOT