IT技术博客大学习 共学习 共进步

标签:UI设计

共 142 篇相关文章

IT 累计浏览 14

Day for Night

在CSS中常规使用`invert(1)`滤镜会导致所有颜色反转,包括原本的色彩信息。若想仅反转黑白(明暗关系)而保持色彩不变,可采用组合滤镜方案:先执行反转操作,再通过色相旋转进行补偿。具体实现方式为`hue-rotate(180deg) invert(1)`。这一技巧的原理在于:在HSL颜色模型中,单独反转亮度(L)分量可保留色相(H)与饱和度(S),而先整体反转再旋转180度色相,数学上等效于仅对L分量取反。该方法适用于需要高对比度暗色主题或图像处理的场景,能够在不改变主色调的前提下实现视觉反色效果。

IT 累计浏览 2,742

仿iPhone辅助球实现

这篇讲的是如何在Android上实现一个类似iOS辅助球的悬浮手势菜单。作者从一个很实用的角度出发,复盘了去年完成的一个个人项目,核心要解决的问题就是:如何让一个View脱离Activity,悬浮在所有界面甚至桌面上,并且能自由拖动和响应点击。 文章深入解释了两个关键的技术实现。第一,如何让Service能够显示View。作者厘清了原理,指出在Service中,通过获取系统的WindowManager服务并调用它的addView方法,就能将自定义View添加到屏幕上,从而实现全局悬浮。第二,如何实现手势交互。这里作者采用了更直接的方式,通过为View设置OnTouchListener,实时获取手指的屏幕坐标,并动态更新View的位置参数(Margin),来实现平滑的拖拽效果。 整篇文章从原理分析到核心代码一气呵成。给出的TopFloatService类代码完整展示了如何创建悬浮球、注册触摸事件监听、以及在点击时弹出菜单,思路清晰,对于想实现类似功能的开发者来说,具有很高的参考价值和实操性。

IT 累计浏览 4,803

手机UI设计基础-尺寸&单位

这篇讲的是手机UI设计中让很多新手头疼的尺寸与单位问题。作者从移动端开发和设计的常见困惑出发,系统梳理了iPhone与Android两大平台的核心概念和适配思路。 文章首先厘清了iPhone的分辨率、屏幕尺寸、像素密度(PPI)以及逻辑分辨率(pt)与物理分辨率(px)的关系,并以表格形式清晰列出了从初代iPhone到iPhone 6 Plus的换算规律(如iPhone 6s为1pt=2px)。针对机型众多的适配难题,作者提出了一套实用的工作流:以iPhone 6的750px宽度作为设计基准稿,使用矢量元素设计,标注后同步输出用于切图的@3x资源;开发端则基于此使用自动布局,再向上向下适配更大和更小的屏幕。 对于Android平台,文章介绍了dp、sp、dpi等关键单位,并建议以1080px宽(xxhdpi)作为通用设计尺寸。最后,文章还延伸至移动端Web,指出通过设置viewport代码(如width=device-width),可以让px单位等同于逻辑像素使用,从而在不同设备上实现统一的页面宽度(如640px)。 整篇文章将碎片化的尺寸知识串联成清晰的适配逻辑,不仅解释了“是什么”,更给出了“怎么做”的具体路径,对理清设计与开发协作的流程很有帮助。

IT 累计浏览 3,621

视觉调整-设计师 vs. 逻辑

这篇讲的是设计中常被忽略的“视觉调整”艺术——当像素完美并不等于眼睛里的完美时,设计师该如何破局。作者从早期过度依赖软件数值对齐的误区出发,揭示了计算机的“理性计算”与人眼“感性感知”之间的关键差异。 文章用四个具体案例拆解了视觉调整的要点:比如播放器图标在几何上居中,视觉重心却需左移;相同色值的填充色与文字,需微调明度才能看起来一致;同样尺寸的方形与圆形,后者需要放大几像素才能视觉等高;全大写字母则需适当缩小,才不会显得突兀。这些调整幅度虽小,却直接影响了设计的整体和谐度。 作者的核心观点在于:优秀的设计师需要超越工具的理性局限,信任并锻炼自己的视觉直觉。这些细微处的打磨,正是“像素级完美”背后的秘密,也是当前AI仍难以模拟的人类判断力所在。

IT 累计浏览 2,781

小心别让圆角成了你列表的帧数杀手

这篇讲的是在iOS滚动列表中滥用圆角导致性能暴跌的“坑”。作者实测发现,为cell中的UIImageView设置`cornerRadius`时,随着圆角视图数量增加,帧率会迅速下滑至45fps甚至30fps以下,造成明显的卡顿感。 更出人意料的是,使用`layer.mask`来实现圆角,性能比`cornerRadius`还要差,帧率可能直接跌到20fps。文章剖析了根源在于**离屏渲染**,特别是频繁的上下文切换带来了数十倍于普通渲染的开销。 对此,作者给出了明确的避坑指南:滚动列表中应尽量避免使用`cornerRadius`或`mask`。如果必须使用,可以通过开启`shouldRasterize`来缓存渲染结果,或者采用预处理圆角图片、覆盖镂空图层等更高效的替代方案来保障流畅度。

IT 累计浏览 2,262

用吐槽的方式生产内容

这篇文章从网易造楼团和IT自媒体人三表的吐槽风格出发,深入探讨了“吐槽”这一表达形式如何演变为一种专业的内容生产模式。作者指出,与严肃的批判不同,吐槽式内容短小精悍、贴近受众,擅长在碎片化阅读场景中传递信息,因此被腾讯新闻哥、网易轻松一刻等移动端产品广泛采用。 文章的核心观点在于,这种看似轻松的“轻阅读”背后,实则有着相当的生产门槛。它不仅需要专业团队对信息进行提炼与再创作,更依赖于平台用户基数来支撑众包生产,形成“专业策划(PGC)+大众智慧(UGC)”的混合模式。尽管这种模式能有效吸引流量,但如何实现商业变现仍是一个待解的难题。 作者最终将吐槽式内容的兴起,视为传统门户网站在移动时代留住分散用户的一次重要尝试。在注意力日益稀缺的当下,这种用轻松姿态完成信息迁移的策略,为内容生产者提供了新的思路。

IT 累计浏览 3,482

关于工作效率的心得分享

这篇文章来自一位设计师的实战总结,分享了他从职场新人成长为团队“快刀手”的十年效率心得。作者以切身经历出发,坦诚效率曾是其长期痛点,并在PDI考核中被反复提及。 他提炼了十项核心原则:从“懂得整理需求”和“探究需求真相”这类思维层面,到“练好刀工”、“提取模版”等技能与流程优化;从“学会聚焦与屏蔽”应对干扰,到掌握“敏捷响应”处理紧急任务。其中既有关于决策必要性的管理思考,也包含了“当自己的事做”这种心态调整,最后不忘强调健康作息是一切的前提。 整篇文章没有空泛的理论,而是通过具体场景(如用整理术处理杂乱需求、28秒响应一个小修改)和生动比喻(如切土豆丝、一心多用的妈妈),让建议变得可感可循。它最终想传递的是:效率是可量化、可进阶的,通过系统性的方法与持续练习,每个人都能找到属于自己的工作节奏。

IT 累计浏览 3,361

移动音乐产品梳理

作者在为自己的音乐播放器项目做调研时,对移动音乐市场进行了一次全面梳理。他指出,在线音乐产品的核心功能形态无外乎专辑、歌手库、歌单、排行榜和音乐电台,而当前市场格局则由版权和资本实力主导。 文章重点对比了几大主流产品的差异化优势:QQ音乐凭借林宥嘉、周杰伦等独家华语版权构筑了强大的内容壁垒;百度音乐则通过为小米MIUI、联想VIBE UI等众多手机ROM提供内置在线资源,成为“隐性的冠军”;网易云音乐作为后起之秀,在古典音乐等垂直曲库上异常全面,并以高质量下载和社区功能吸引用户。此外,文章也提及了阿里收购虾米与天天动听后的整合,以及多米音乐通过预装和收购获取资源的历程。 除巨头竞争外,作者也注意到满足长尾需求的小众产品,例如算法驱动的豆瓣FM、基于使用场景的LavaRadio,以及专注独立音乐的落网。整体来看,这篇梳理清晰地呈现了各平台基于自身资源与策略形成的竞争态势。

IT 累计浏览 3,080

侧边栏交互的利弊

侧拉菜单的设计看似节省了空间,但它可能正在悄然损害你的用户参与度。这篇文章指出,多项A/B测试和用户研究数据显示,这种“汉堡包菜单”导航模式的使用可能弊大于利。 作者从用户体验角度出发,深入剖析了这一模式存在的四大核心问题:首先它“不易发现”,隐藏的特性违背了“不在眼前,就不会想到”的直觉;其次它“效率更低”,强制的打开动作增加了操作步骤;再者它常常与iOS等平台的原生导航规范发生冲突;最后,它让信息呈现变得“不直观”,难以引导用户。 文章并未止于批评,而是进一步讨论了设计的权衡。它提醒我们,节省屏幕空间不应以牺牲导航清晰度或违背基本人机交互原则为代价,并提供了在何种极少情况下才应考虑使用侧拉菜单的思考方向。对于移动端设计师而言,这是一次对常见设计惯性的必要审视。

IT 累计浏览 1,100

人才的特点

这篇讲的是非科班背景的人,如何靠自身努力在设计领域脱颖而出。文章用了三个身边的真实案例:有人自学UI设计三年后成为上市公司主管,有人用七天学习交互设计后四年成长为产品负责人,还有人从日薪150元的实习生成功转型。 作者认为,成为顶尖大师或许需要诸多天时地利,但成为一名优秀设计师,关键在于是否具备几个核心特质:对设计发自内心的热爱,把设计好产品作为自己的理想,哪怕是处理琐碎事务时也追求精益求精,以及愿意在工作之外投入大量时间学习钻研。 这篇文章没有空谈理论,而是用一步步真实的职业进阶路径告诉我们:专业背景可以不是起点,但热爱、目标感、高标准和持续的努力,是从平凡走向优秀那条路上不可或缺的基石。

IT 累计浏览 3,360

Google移动网站设计原则

这篇讲的是Google与AnswerLab联合发布的一份白皮书,专注于移动网站的设计原则。它并非泛泛而谈,而是基于大量真实用户研究,系统性地提炼出了25条具体设计准则。 这些准则被归纳到五个核心领域:主页与网站导航、网站搜索、电子商务与转化、表单设计以及整体的可用性与表单因素。文章清晰地指出,遵循这些经过验证的最佳实践,是打造一个既能取悦用户、又能有效驱动商业转化率的优秀移动网站的关键。 对于从事移动端UI/UX设计、产品策划或前端开发的朋友来说,这份白皮书提供了一套非常具体的设计检查清单。文内附有百度网盘链接,方便读者获取完整版PDF进行深度参考。

IT 累计浏览 3,662

Android Wear设计指南

这篇讲的是Android Wear如何为智能手表这种“新形式”构建专属UI设计语言。作者开篇点明,可穿戴设备的交互核心围绕“建议”与“询问”两个方面展开。前者通过“上下文流”实现,用户垂直滑动查看一张张信息卡片,应用可将最相关的内容主动插入其中;后者则依赖“提示卡片”,用户通过语音“好的,Google”或上滑唤出一系列可点击的操作提示。 文章进一步阐释了贯穿设计的核心原则:设备应具备情境感知能力,做到信息呈现及时、简短且交互极简(如手势与语音),像一位懂你的私人助理,只在必要时打扰。这些原则具体落实在通知UI模式中:通知卡片需为“一瞥”而非阅读设计,优先级对应其紧迫性,允许最多三个操作按钮,并强调了图像在提供上下文信息时的作用与尺寸规范。 整篇指南清晰地描绘了如何将Android体验从手机屏幕延伸至手腕,强调通过智能、克制且直觉化的交互,让技术自然融入日常生活。

IT 累计浏览 3,262

[译文]设计转场动效

这篇译文探讨了一个设计师们常忽略的细节:状态之间的转场动效。文章指出,许多设计师专注于像素级的按钮、图标和表单,但当用户点击按钮后,界面是如何从状态A“切换”到状态B的,这个过程往往被视为理所当然。作者认为,这种生硬的跳转在真实世界中并不存在,而利用好“时间”这个被忽视的维度,动效就能成为功能性工具,而不仅仅是装饰。 文章通过对比静态设计与动效设计,清晰地阐述了两者的关键差异。静态设计是孤立的画面,无法描述过程;而精心设计的动效(例如应用缓冲曲线调整动画节奏)则能引导用户的视觉,解释信息的流动。具体例子中,文章对比了列表新增条目时直接跳变与平滑展开填充的体验差异,也对比了常见的侧滑跳转与将详情页视为内嵌展开的交互逻辑。作者指出,后者能让用户更直观地理解自己所处的层级深度,从而减少对面包屑导航的依赖。 这些思路的核心在于让数字界面的过渡更贴近我们对物理世界的认知习惯。通过赋予界面变化以符合直觉的时间与空间逻辑,交互不仅能变得更流畅自然,也能在无形中传递更清晰的系统状态信息,最终提升整体体验的优雅度与可用性。

IT 累计浏览 2,360

(续)为什么很多技术合伙人参与创业时会先谈钱?

这篇回应文章深入探讨了前文引发的讨论,聚焦于技术合伙人参与创业时常被误解的三个核心问题。作者从实际的创业对接经验出发,澄清了几个常见误区。 首先,文章指出创业项目并不适合外包模式。因为创业产品的需求是动态且不确定的,需要持续的沟通和迭代,这与外包“需求明确、一次交付”的模式根本冲突。同时,愿意接受远低于市场薪资的人员,其合作心态也与外包截然不同。 其次,关于激情,作者认为技术人员的创业激情并非凭空设想而来,而是在产品上线、获得用户正向反馈的过程中逐步点燃的。这种基于逻辑和实际成果的激励,比空谈梦想更为持久和重要。 最后,文章探讨了技术合伙人的定位问题。创始人不能简单地将产品规划完全抛给技术方,双方容易因角色认知差异产生鸿沟。可行的方案是创始人学习制作产品原型,或引入产品合伙人作为桥梁,最终实现业务与技术视角的真正融合。 整体而言,文章并非否定谈钱,而是呼吁创业各方基于对彼此工作模式的深刻理解,建立更健康、对等的合伙关系。

IT 累计浏览 3,260

用QQ邮箱发一封求职信

这篇讲的是最近关于“用QQ邮箱发求职信是否合适”的热议。作者从这场争论出发,没有陷入情绪化的站队,而是冷静地剖析了“QQ邮箱”在求职场景下的多面性。 文章核心观点是:绝大多数情况下,用QQ邮箱发求职信并无不妥,其负面影响充其量只有20%,关键还是简历质量。但在一些特定场景下,它确实可能带来减分。比如,在大公司的商务职位或科技媒体编辑岗位,使用Gmail等更具国际感和商务气质的邮箱,可能在第一印象上更得体。作者甚至指出,在产品经理等技术岗位,Gmail优雅的设计语言本身就能传递一种对产品细节的敏感度。这些判断源于对HR筛选习惯的观察(比如数据发现“QQ邮箱”是简历未通过的强特征之一)和对不同品牌气质的理解。 作者也提醒,这场争论中许多“地图炮”式的互怼是不理性的。无论是批评QQ邮箱还是捍卫它,过早的愤怒往往会遮蔽对复杂场景的认知。就像文章最后举的支付宝支付密码的例子,很多看似“荒谬”的设计背后,都有其特定的用户逻辑和妥协。因此,他建议不必对号入座,了解这个世界的复杂性,比简单地评判对错更有价值。

IT 累计浏览 2,102

细说促销(三):促销的实施

这篇讲的是促销活动执行环节的常见问题与解决方法。作者从“策划”这个词说起,将“策”(创意方案)与“划”(项目管理、沟通执行)区分开来,点明许多活动“想得很好,做得很差”的核心矛盾。 文章指出,执行的第一步是预算规划。钱不能只花在买广告上,更应投入在创造有吸引力的活动内容本身。文中以“百分一女装”的全球外拍为例,说明他们花费数十万用于拍摄和广告,最终引入的流量是普通广告的5倍以上,关键就在于用独特内容驱动了口碑传播,而非单纯购买流量。 在具体实施上,作者强调了几个关键点:一是做好清晰的项目分工与时间管理;二是策划人必须主导“客户体验”,而非完全交给设计师。策划需明确传达页面的核心信息(“只要…就能…还能…”),确保用户第一眼就抓住重点。文中通过一个页面设计混乱的实例,说明信息堆砌会损害用户认知。最后,执行要“灵活而严肃”:广告和页面可以持续优化调整,但活动规则必须保持稳定,任何修改都需慎之又慎。

IT 累计浏览 4,960

Android设计中的.9.png

这篇讲的是 Android 开发中用于适配多分辨率的特殊图片格式——.9.png。文章从解决图片拉伸变形问题的实际需求出发,对比了普通 PNG 与 .9.png 的核心差异。 作者通过图示清晰地拆解了 .9.png 文件外围的四条黑色线条:上、左边线定义可拉伸区域,下、右边线则标定内容显示区域。通过具体按钮的案例,演示了如何正确设置拉伸点以避免图形圆角或边框失真,以及如何划定内容区域让文字排版整齐。 文章还分享了一个实用技巧:若想制作一张不被拉伸的 .9.png,只需将拉伸点标注在透明像素上即可。最后,总结了输出 .9.png 的两种常用方法,并重点强调了两个易导致编译失败的关键细节——边缘像素必须纯黑或全透明,以及文件后缀名的正确格式。

IT 累计浏览 2,000

创造流动的瞬间—探讨移动端交互动效设计

这篇文章从iOS 7这一标志性设计变革说起,探讨了移动端交互动效如何从“可有可无”的装饰,转变为塑造产品体验、跨越用户心中“情感阀值”的关键要素。 作者详细拆解了iOS 7中那些“创造流动的瞬间”:3D视差带来的景深、模拟现实物理运动的拟真动画、气泡碰撞的弹性效果、体现空间感的缩放与手势跟随。文章不仅停留在描述,更深入剖析了动效的五大核心作用:通过流畅过渡组织界面的时间演进、利用高效反馈减轻用户等待焦虑、增强“直接操纵”的直觉感、巧妙引导隐藏功能,以及最终升华品牌体验与情绪表达。 在此基础上,文章提出了一套实用的设计原则:顺应轻动画趋势、遵循自然运动规律、重视应用内整体动画编排、平衡效果与性能,并强调“恰到好处,服从体验”这一黄金法则。为了将这些理论落地,作者团队还实践性地开发了一款“交互动效库”工具,通过分类收录200余段视频案例,为设计师提供灵感、为开发提供参考代码,解决了动效设计在协作流程中的痛点。

IT 累计浏览 2,500

APP「返回键」的进化

这篇讲的是APP里那个小小的“返回键”背后,其实藏着产品设计的核心问题之一——导航与流程。作者从一个有趣的观察切入:最近几年,这个按钮本身正在悄悄“进化”。 他指出了两个显著的趋势。一是位置的移动:从经典的左上角,挪到了更方便单手触及的左下角,比如淘宝和知乎日报。作者认为,这背后是手机屏幕越来越大、越来越难以单手掌握的硬件变化在推动设计改变。二是交互方式的革新:手势操作,尤其是向右滑动返回,正逐渐成为一种更高效的选择,知乎、豆瓣小组等应用已在采用。这显然比精准点击一个按钮更流畅。 文章也点出了其中的矛盾与思考:比如在iOS上,右滑手势可能与列表项的删除操作冲突。而Android早期因物理返回键的坚持,其平台内的返回体验曾长期不够统一。作者没有给出标准答案,而是呈现了这种进化如何平衡平台规范、硬件条件和用户效率——返回的体验,依然在持续演进中。