ken的想法

Thoughts, stories and ideas.

搭建一套符号原子设计的设计框架
设计的故事

搭建一套符号原子设计的设计框架

摒弃页面思维网页、页面,这个词从互联网诞生的时候就开始存在了,但是‘页’这个词是我们对现实世界的概念过渡过来的,因为我们习惯叫一页纸,一页文档。 但是在现代的互联网中,页面这个概念整悄悄的消失了。 在互联网初期,一些公司只是把平面设计的的页面直接搬到网站上,时隔20几年,这个概念正在发生变化,大家不再把网页,当成一个单纯页面而已了,我们已经意识到页面已经消失了,取代它的是流动的数据,功能模块等等。而我们意识到,页面是一个时刻都在流动的媒介,它可以与人交互,可以快速的切换样式。一个新的概念也不断的出现在WEB社区中,它就是:模块化。 通过把元素分割组合而成的单独模块来组成一个页面。 页面的每个元素可以自由使用和可配置,并且随着终端设计的尺寸而改变展现效果。 在HTML的设计历程里,前端框架的使用,使得模块化变得非常简单和扎实UI框架twitter 开发的Bootstrap 目前是Git上最受欢迎的代码库。 优点是方便,简单,稳定。 框架的问题就是,仿佛大家都穿着同样的衣服。 设计系统良好的设计系统的基石是风格指南(style guide),它记录和整理了能够提供指引,使用和准则的设计资料。 品牌识别在传统的品牌设计中,VI手册一般是最终出现的产出物。 品牌识别指南(VI手册)定义了使公司保持独特的资产和材料。LOGO,

什么是原子设计系统
设计系统

什么是原子设计系统

原文翻译地址 “我们不设计页面,我们设计构成元素的系统。”——Stephen Hay随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,而不是创造网页的简单集合。 很多人都提过创造设计系统,他们大都注重建立颜色、排版、网格、结构和风格的偏向。这种思考当然重要,但我没有那么痴迷于此,因为最终这些东西会并始终会是主观的。后来我把兴趣放在界面的构成元素及创造设计系统的方法论上。 在寻找灵感和类比时,我想到了化学。所有事物(无论固体、液体、气体,简单的还是复杂的东西)都由原子构成。这些原子单元聚合在一起构成分子、形成更复杂的有机物,最终形成了宇宙万物。 与此类似,界面由更小的元素组成。这意味着我们可以把整个界面拆分成一些基础模块[原文:building block ,建筑砖]并从这些模块开始。这就是原子设计的基本主旨。 Josh Duck的HTML周期表对网页设计元素做了很好的分析。 什么是原子设计?原子设计是创造设计系统的方法论。它有五个不同等级: 1.原子 2.分子 3.有机物

止鼾球的故事-2
KenThink

止鼾球的故事-2

从2019年的上半年,我们开始研究止鼾产品,并且确定了研究方向是 Positional Therapy 疗法,我们从互联网上搜集了大量的用户自制的PT疗法产品。 这种将网球绑在身上的做法,俗称“网球疗法”。为了证明这种疗法是否有效,我们也尝试自己制作了一些这样的止鼾T恤,如图。 (图片来源:sleepon) 我们分组体验了“止鼾睡衣”,发现这种网球疗法的睡衣,的确对因为体位不正确的原因而导致的打鼾有效果。 这种睡衣的原理也很简单:通过网球,起到“提醒”的作用,它可以在你仰睡的时候将你“咯”醒,这种并不太舒适的感觉会让你明白自己的睡姿不正确,从而自觉的回到侧睡的姿势上。 在体验这种睡衣的过程中,我们发现需要关注的设计重点: 网球的重量:作为一个初级体验者,前几次穿着这种添加重量的睡衣,有点不太习惯这种有重力在拉扯着睡衣的感觉,不过在随后的几天,会慢慢习惯这种重量。网球的硬度:我们发现这个产品的着重点是网球的硬度,不同的硬度会带来不同的“提醒”强度,太硬的球会硌的很痛,太软的则会没有效果。随后,我们尝试了改变填充球的硬度和大小,来测试止鼾的效果,我们尝试了软木球。 我们得到的结果是:这种软木球的填充物1比网球轻15g,

止鼾球的设计故事-1
KenThink

止鼾球的设计故事-1

7月22日,启动 大家好,我是设计师Ken,作为SLEEPON的创始人之一,我和设计团队从0到1的参与了sleepon产品的设计与研发,包括Go2sleep 和 SLEEPON APP。 距Go2sleep上市已经过去一年多了,在不断完善产品的过程中,我们发现有很大部分用户都有打鼾的困扰1,同时我们也收到很多用户的反馈:大家迫切需要一个可以帮助他们有效止鼾的产品或者方法。 从去年上半年开始,我们就开始收集和研究相关止鼾产品:牙套,枕头,止鼾贴,鼻夹……,后来在睡眠专家XXX的建议下,我们发现医学上有一种Positional Therapy 的治疗方案,简而言之就是通过改变睡姿来改善打鼾,并且有足够的论文支持这种疗法的有效性2。与此同时,我们还注意到很多用户自己DIY了一些睡衣,并且将网球装在衣服里,以此来控制自己的睡姿。 这真是一个很重要的发现,我们当时也很兴奋的自己缝制了一个可以装网球的睡衣(图),经过一系列的实验我们发现仅仅的通过网球,很难达到我们对SLEEPON产品的数字化追求。 我们希望通过睡姿和睡眠记录,睡眠分析等技术,将Positional Therapy打造成一个每个用户都可以在家里实现,可进行长期跟踪的,可数据化治疗效果的工具。 我们一直在思考如何通过SLEEPON的数字化睡眠管理系统,帮助用户更好的完成Positional Therapy和追踪。 我们忽然意识到,我们在创造一个世界上绝无仅有的数字化睡姿疗法的产品。它包括记录,追踪,实际改善和反馈评估。

手把手运营活动项目:VIP账号激活
KenThink

手把手运营活动项目:VIP账号激活

背景我们是一个硬件初创公司,经过几个月的努力,新产品终于要上架了. 这个项目,之前是在indiegogo上众筹的项目,为了感谢天使用户的支持,我们决定给最早一批支持者每人一个VIP卡,有了这个VIP权限,以后购买我们产品都有折扣. 需求虽然看上面说的是挺简单的,可是实际落地的时候还是要涉及到几个部门的协作,后台要做数据库,前台程序需要判定是否弹出VIP激活页面,激活交互逻辑流程是啥样的,硬件(VIP卡)要怎么印刷,几千个随机的VIP编码应该如何印刷出来? 有了上面的场景需求,首先就要捋一捋具体要怎么落地了,到底有几件事,软硬件的逻辑是怎么样的呢? 首先要生成一批VIP码.把VIP激活码打印到卡片上.把卡片随同产品包装,寄到用户手上.用户打开APP,输入激活码.用户头像上会显示一个VIP标识.(未来)用户购买产品时,系统判断用户是否是VIP用户,如果是VIP用户则自动打折.先画张图: 如何落地实现呢?生成激活码首先是生成一定数量不重复的激活码.(设计师跟供应链的同事一听就郁闷了,这么多随机码,还不是按顺序的,怎么输出设计稿呢?但是道理大家也明白,激活码没有逻辑以免被用户猜到啊.) 可以选择在线生成的或者找程序员写一下,随机生成还是蛮容易的,不过这里注意几件事: 位数,随机码的位数不能太长,大小写最好不做区分,这样用户输入起来体验会好一点.(比如)

Feed 流的样式分析
KenThink

Feed 流的样式分析

feed流的主要有3中展现形式:图片、文字、视频。 不同的产品呈现feed流的形式也不尽相同,只有适合产品性质的设计形式才能将信息完美的传递给用户,展现产品的气质。 a.文字 文字性的feed流主要以“标题文字+辅助图片”组成。一般情况下文字和图片的组合方式有“自左到右、自上而下”两种,符合用户的阅读习惯。 对于“文字性feed流”最大的优点就是信息明确、一目了然,通过对标题信息的提炼快速告诉用户当前模块的核心内容,用户再根据自己的喜好决定是否进行点击进入查看详细的内容。例如36氪、淘宝头条、简书、网易新闻: **优点:**信息明确、一目了然;一屏之内展现的信息数量多,信息获取率高;符合自左到右、自上而下的阅读顺序;图文并茂,辅助图片可以对标题加以说明;学习成本低。 **缺点:**视觉冲击力较弱;交互路径长,需要二次点击才能进入详情页;辅助图片视觉冲击力弱;仅有标题信息,展示不全面。 b.图片 图片性feed流以图片为主,文字性信息一般搭配在图片底部辅助展示。 图片性feed流具有良好的视觉冲击力,

Go2sleep 指尖套设计背后的故事
KenThink

Go2sleep 指尖套设计背后的故事

缘起在Go2sleep产品发售后的8个月(*)中,我们持续努力的改进我们的产品,APP经过了30+版本的迭代,从1.0升级为2.0,同时我们还发布了最新的跨平台桌面应用程序 Sleepview,这让我们可以在任何地方查看睡眠数据报告了. 在这几个月中,我们收到了大量的用户反馈和意见.所以我们觉得是时候给GO2sleep产品本身进行一次"升级"了. Go2sleep的设计理念: 舒适而小巧,简洁而极致,便捷而强大. 而我们的GO2SLEEP标准版本也的确做到了,它依然是世界上维度最多,最小巧轻便的实时监测设备,它有强大的多维度传感器,可以从不同的角度监测睡眠中体态特征.Design追求更准确的同时我们不希望牺牲掉用户体验,我们一致认为只有更舒适的佩戴体验才是用户愿意长期使用的基础. 所以我们着手设计SE的目标是: 追求更准确的数据不牺牲舒适的佩戴体验可以适配不同尺寸的手指尺寸更符合直觉的使用体验如何获得更准确的数据? 经过一系列的研究,我们发现指尖的皮肤更薄,毛细血管更丰富实际测试的数据比手指内部会更好一些,另外我们发现对光线的遮挡性也会检测数据有一定的影响.所以我们把指尖位置,作为了这次设计的主要佩戴位置. 在工程师给出了确定的数据反馈之后,我们开始着手设计"指尖套"版本的go2sleep,我们收集了大量的手指骨骼解剖图,以及人体工程学的数据,作为设计参考. 图片来源于网络油泥模型 确定了基础的造型,我们开始绘制手稿. 手稿图确定了手稿的基本造型后,我们通过3D模型软件对设计进行3D建模.然后3D打印出模型进行研究. 佩戴的直觉在设计的过程中,我们从只顶部只有一根筋位的设计调整为"

西文字体
值得一看

西文字体

原文地址 咱们博大精深的汉字书法艺术大伙都已经非常熟悉了。不过,世界其他国家也同样也有着形式各异的书法门类,这其中就包括西文书法。同时,西文字体的历史与西文书法的历史也是密不可分的有机整体。了解一点书法知识,对设计师来说肯定是有益的。 此篇文章缘起我之前见到有位国外设计师手写的logo非常精彩,形形色色的logo都能用书法笔一挥而就。于是,我心血来潮也写了一写。并特意挑选了一些可以与西文书法结合起来书写绘制的logo,同时也趁此机会对知名品牌logo中的字体设计、品牌视觉形象的历史进行了一次重新深入地了解,在这里也跟大家分享一下。我会按照西文字体的类别来逐个讲述,为此我还专门录制了一些书写的gif动画。 百威是超市货架上常见的美国啤酒,估计平时大家喝完后从来没有注意过瓶身上的图案,细节设计得还是相当精美的。而百威logo中的英文字体“Budweiser”是基于“铜板手写体”(Copperplate)的风格来改良设计的。 产生于17世纪英国的“铜板手写体”当时在西方风靡一时,在字体史上也有着很重要的地位。它是由意大利体(Italic)演化而来,当时广泛用于铜版雕刻印刷当中。它的创新在于首次把一个单词中所有字母都连了起来,这样有利于快速书写。铜板手写体在很长一段时间都是西方许多重要文书、证书、有价证券的专用字体。同时也被广泛用于请柬、名片等社交印刷品上。 现如今我们依然可以从很多历史悠久的品牌或者印刷品上见到它们的踪影。历史上很多西方书法家都留有“铜板手写体”的真迹和古本,均都带有很浓重的个人风格。那时期也产生了许多种不同风格的书法版本,就好比我们楷书也会产生欧、