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

视觉设计

共 226 篇文章

IT 2016-02-16 21:08:14 / 累计浏览 3,635

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

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

IT 2016-02-16 20:55:30 / 累计浏览 4,197

为什么要段首空两格

这篇讲的是“段首空两格”这个看似不起眼的中文排版习惯,背后其实藏着一套完整的设计逻辑。作者从“以用户为中心”的思路出发,梳理了中西方段落分隔的漫长历史——从中国汉代奏章的“需头”传统,到西方中世纪手抄本的首字母放大,再到1919年新式标点符号运动将其规范化,这种缩进最初都是为了让段落划分更清晰、提升阅读节奏。 文章的核心观点很明确:段首空格的两大作用是标记段落停顿和视觉区分。它对比了网络时代的不同选择,指出虽然网页可以靠空行或标题来分段,但一致性的左侧缩进更符合大多数人从左到右的阅读习惯,能优雅地引导视线,增强长文的易读性。尤其对于汉字这种信息密度高的文字,段落分明能有效缓解阅读压迫感。 最后作者给出实用建议:在大多数中文网络内容中,段首空两格依然是很好的分隔方式;但若已有标题或列表等明确结构,也可灵活处理。整篇文章将一个小排版细节,讲成了一次对用户阅读心理和跨文化设计史的洞察。

IT 2016-02-13 23:03:08 / 累计浏览 3,997

APP图标的色彩

这篇文章做了一件挺酷的事:用工具批量分析了应用商店里成百上千个APP图标的“支配色”,然后用色轮直观展示了不同类别、平台和排名的APP在色彩选择上的差异。 研究发现,无论是iOS还是Google Play,蓝色和红色都是绝对的主流色,构成了明显的分布群。但细节里很有意思:免费APP图标倾向使用单一颜色,而付费APP的图标则更常组合多种色彩,显得更复杂。社交媒体类APP虽然大家印象中是“蓝色的天下”,但分析显示绿色也有相当比例。游戏APP的色彩则更为丰富和分散。有意思的是,Mac应用商店的色彩分布与iOS非常相似,而Google Play的数据也印证了跨平台的这一趋势。 基于这些发现,作者给出了一个简单的设计师选择指南:想随大流就选蓝或红,想略有不同可以试试绿色,如果想彻底特立独行,那就大胆用上粉色或紫色吧。

IT 2015-11-08 21:58:19 / 累计浏览 3,074

不要对设计师说的话

这篇讲的是设计师与开发者合作时那些看似无害却可能引发矛盾的对话。作者从一线协作经验出发,列举了几句常见的“地雷”发言:比如直接要求“把这个按钮加粗”,或者擅自修改设计稿并说“我能修复”。这些行为的本质,是跳过了对问题本身的讨论,变成了微管理。 文章的核心观点很明确:反馈应聚焦于“是什么”和“为什么”,而非“怎么做”。当你说标题不够突出时,设计师会从视觉层次、系统一致性和整体平衡的角度去优化;反之,一句简单的“加粗”指令,可能破坏精心维护的设计体系。对于开发者无意中修改界面的行为,作者打了一个比方:这就像设计师拿走你即将上线的代码擅自改动,是对专业信任的极大伤害。 作者也指出,设计师对“5像素”这类细节的坚持并非挑剔,而是每一个微小精度的累加,最终定义了产品的质感。而当设计师提出大胆构想时,开发者一句“这不可能”往往过早关闭了对话空间——更有效的做法是说明平台限制,共同寻找替代方案。文章最终指向一种健康的协作文化:用建设性的提问替代生硬的指令,用信任激发彼此的专业判断,共同对产品负责。

IT 2015-07-21 23:30:56 / 累计浏览 4,644

给自己的字体课(一)——英文字体基础

这篇讲的是作者从实际设计需求出发,为自己梳理的英文字体入门知识。核心是解析衬线体与无衬线体这两大分类下的“情绪”差异与应用场景。 文章首先厘清了衬线体(Serif)的演变脉络:从笔划对比缓和、带有手写痕迹的旧风格字体(Old style),到线条锐利、对比强烈的现代字体(Modern)。通过《Kinfolk》杂志的排版和阿玛尼、华伦天奴等奢侈品牌的Logo案例,展示了前者如何营造传统、柔软的诗意感,后者如何传递现代、高冷的优雅。 而无衬线体(Sans Serif)则被形容为更简明有力。文章重点以Helvetica为例,剖析其“中性”特质——既适用于地铁导视系统,也能融入时尚品牌,成为信息传达的“透明容器”。作者也指出,字体的情绪是相对的,比如板状衬线体(Slab Serif)就能呈现出现代、年轻的感觉,打破了“衬线体一定古典”的刻板印象。 整篇文章像是一份清晰的笔记,从衬线有无的基础分类切入,最终落脚到字体如何服务于品牌气质与内容调性,为设计初学者提供了一个实用的认知框架。

IT 2015-01-24 23:38:58 / 累计浏览 3,659

网页字体排印指南

这篇讲的是网页上那95%的文字,到底该怎么排才好看又专业。作者从“阅读”这个最核心的用户行为出发,把字体排印清晰地分为偏向设计的Creative Typography和偏向技术的Technical Typography,并聚焦于后者,为前端工程师提供一套有迹可循的实践规则。 文章直面了中文网页排版的核心痛点:由于系统预置字体稀少且WebFont体积庞大,我们只能在有限的“系统安全字体”里做选择。为此,作者详细梳理了桌面端(Mac、Windows、Linux)与移动端(iOS、Android)上,中西文字体的推荐组合,并解释了宋体与黑体在内文与标题上的不同角色。 更进阶的是,文章将排版提升到了“旋律”的层面。它借鉴《字体排印的风格要素》中的理念,将字号大小类比为音乐的音阶,提出了以16px内文为基础,对标题字号进行同比例递减的具体方案,旨在构建视觉上的和谐韵律。文末直接提供了两套经过考量的`font-family`代码,分别用于内文和标题,极具实操参考价值。对于任何希望提升页面文字可读性与质感的开发者而言,这都是一份扎实的指南。

IT 2015-01-19 23:48:22 / 累计浏览 3,359

文字编排的易读性

这篇讲的是,一款优秀的阅读应用如何通过细致的文字排版规则,来提升核心的阅读体验。作者从一个常被忽视的痛点切入——许多设计将精力集中于图标和色彩,却忽略了让文字本身更易读这个更根本的任务。 为此,文章系统梳理了网易云阅读在正文排版上的具体设计准则。它从设定合适的版面区域与边距开始,详细阐述了字体大小的层级关系、行对齐方式的选择(例如长文更适合左右对齐),以及至关重要的“留白”艺术。留白需遵循从字内到字间、行间、段间面积依次递增的规律,避免混乱。 文章特别强调了行距与段距的设定细节:正文行高常设为字体大小的两倍,并需根据字体(如宋体与黑体)特性微调;段间距则建议约为两个字高,以保证段落视觉上的独立与连贯。此外,针对中英文混排、标点符号的“悬吊”与“避头尾”处理等中文特有的复杂情况,文中也给出了具体的预设规则。 最终,作者指出,尽管版面设计会随时代与读者群体变化,但建立一套基于阅读体验的、明智的排版规范,是确保产品文本在任何设备与环境下都能清晰、舒适呈现的基础。

IT 2014-12-03 00:00:27 / 累计浏览 3,677

跨终端设计模式

这篇文章聚焦于数字设备爆发式增长的2011-2012年,从终端屏幕尺寸的维度,系统梳理了跨终端的设计模式。作者将当时市场上的数字产品划分为四大类别,并逐一分析了其生态与设计特点。 首先是智能手机,Android的开放催生了激烈的市场竞争,屏幕尺寸从4寸到5.5寸百花齐放,设计重点在于如何适配多样化的单手操作场景。其次是平板电脑,以iPad为首的设备占据了客厅和移动场景,其更大的屏幕带来了与手机完全不同的信息密度和交互逻辑。第三类是PC与笔记本,随着“超级本”概念和Windows 8的推出,传统电脑开始融合触摸交互,设计上呈现出平板与电脑的融合趋势。最后是智能电视与机顶盒,这类大屏设备引入了体感、手势等远场交互方式,开启了客厅娱乐的新体验。 这篇文章的价值在于,它并非泛泛而谈,而是紧扣当时具体的硬件产品和市场数据(如国内安卓手机季度出货量),为我们勾勒出一幅清晰的“设备-屏幕-交互”演进地图,对理解响应式设计、自适应布局等跨端策略的历史背景很有帮助。

IT 2014-11-27 13:04:52 / 累计浏览 3,956

与众不同易,精益求精难 — QQ导航改版设计心得

这篇讲的是QQ导航改版背后的设计思考。作者从一组关于东京电视台在突发新闻时依旧播放日常节目的搞笑图片切入,引出了设计中一个经典的难题:是该追求“与众不同”,还是应该努力“更好”。 文章指出,像东京电视台那样保持独特性,或许能在众多频道中脱颖而出。但对于用户可能只用一两款的互联网产品来说,仅仅标新立异是不够的,关键还是要在基础体验上“更好”。文章结合QQ导航改版的具体背景展开:在网址导航领域,hao123和360导航已形成双寡头格局,而QQ导航的用户结构与它们存在显著差异——过半用户使用时间在2-3年以内,更习惯快速获取内容。 因此,新版设计没有简单追随竞品的“F”型布局,而是基于目标用户的需求关键词(清爽、快速、权威等)和实际使用数据(例如75%用户日浏览网站不足10个),果断地对页面结构进行了简化,将名站导航置于更核心的位置。这展示了在红海竞争中,如何通过深度理解自身用户特质,来找到平衡“差异化”与“体验优化”的设计路径。

IT 2014-11-23 21:07:41 / 累计浏览 2,670

打造舒适的阅读空间—云阅读iPad3.0设计总结交互篇

这篇讲的是网易云阅读iPad 3.0版本在交互设计层面的完整迭代过程,核心目标是在大屏设备上打造一个“舒适、实用、有感觉”的沉浸式阅读空间。 项目面临的首要挑战是如何将手机端已成熟的云端同步、阅读圈等功能整合进iPad,并优化其信息架构。作者引入了“心流”设计理念,以“有用、可用、有氛围”为原则,试图平衡用户的情绪与注意力。设计团队对首页信息架构进行了深入探索,尝试了竖导航、分屏平铺等多种方案,最终选择了顶部Tab切换的扁平化结构,使首页更像一个纯粹的信息容器。 阅读圈作为连接内容与人的新功能,其信息流设计避免了单列表内容少和瀑布流视线跳跃的问题,采用了规则的卡片化布局。通过对不同分享内容定义显示优先级,确保了界面在内容变化时外观的稳定与视觉流的顺畅。此外,文章还详细介绍了对“本地书上传同步”任务流程的简化与细化,以及如何通过动效设计落实情感化体验。 整体而言,这篇总结不仅展示了具体的设计方案,更分享了从理念到细节的完整思考路径,体现了对iPad大屏交互特性的深入洞察。

IT 2014-11-23 21:01:43 / 累计浏览 3,437

iOS和Android设计规范备忘表

这篇介绍了一个iOS与Android设计规范的对照表,作者认为这是目前较为清晰易用的参考资源。文章直接呈现了一个全面的对比图表,涵盖了两个平台在导航、交互、图标、排版等核心方面的设计差异。 例如,iOS的设计强调简洁和一致性,导航常置于底部,交互反馈偏向微妙动画;而Android更

IT 2013-10-15 13:39:00 / 累计浏览 3,129

字体的性格

字体如人,也有自己的性格。这篇文章从“字如其人”出发,探讨了字体设计如何通过形态传递情感,早在读者理解字义之前便“未成曲调先有情”。 作者以蔡邕《笔论》中“若利剑长戈,若水火云雾”的变幻无方为引,将字体的性格拆解为几个核心维度:笔画的粗细赋予字体力量感,粗若断喝,细若低语;线条的曲直带来气质差异,直线刚直,曲线柔美,而刚柔并济方显灵动;结构的松散与严谨,则对应了日常手写的随性与庙堂碑铭的庄重。 文章更进一步,探讨了笔画细节繁简所代表的古典与现代感——从细节丰富的衬线体到极简的无衬线体;以及不同书写工具,如毛笔与刻刀,如何为字体注入截然不同的质感。通过北魏楷书、超刚黑、铁筋隶书、Helvetica等具体实例的对比,清晰展示了不同字体性格的应用场景:粗体强调标题,手写体适合儿童题材,严谨楷书用于庄重场合。 这就像一场字体的性格侧写,不仅阐明了字体设计的美学原理,也为我们在排版、品牌视觉中如何“选对字体,讲好故事”提供了直观的指南。

IT 2013-09-23 13:45:12 / 累计浏览 2,954

拟真设计与扁平化设计

这篇讲的是苹果iOS 7告别拟真设计、拥抱扁平化设计背后的思考与两种风格的核心差异。作者从拟真设计(Skeuomorphism)的定义与历史讲起,它通过模拟真实世界的材质与动作(如iBooks的书架和翻页效果)来营造亲切感,从而大幅降低用户对陌生界面的学习成本。但这种“以貌取人”的倾向也催生了用户只重外观而忽视功能体验的问题。 当拟真设计热度减退,以微软Metro UI为代表的扁平化设计开始兴起。它脱胎于瑞士版式设计,摒弃纹理和光影,用纯粹的形状和色彩追求视觉简约与信息的高度整合。然而,这种极简化也可能带来新的困惑,比如用户难以区分按钮与静态图片的交互状态。 文章最终指出,无论是拟真还是扁平化,都不是完美终点。设计思路的演进始终与屏幕技术、用户认知水平紧密绑定,关键在于根据具体场景选择最恰当的方案。

IT 2013-08-28 22:18:20 / 累计浏览 4,961

Android设计中的.9.png

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

IT 2013-07-07 21:24:51 / 累计浏览 4,141

卡通手绘类风格网站设计欣赏

这篇文章汇集了众多采用卡通手绘风格的网站设计案例,它首先点明了这种风格的核心魅力:它跳出了传统框架式设计的规整与束缚,追求一种活泼、随性且自由的视觉表达,让整个页面充满跳跃感。 作者指出,这种风格最初常见于游戏和儿童社区网站,但其表现力早已溢出这些领域。如今,许多设计工作室和个人设计师也倾向于用手绘的笔触来展现自己的日常工作与生活哲学,为品牌赋予独特的亲和力与个性。文章还特别提到一个关键的技术结合点:当手绘风格与滚动视差(Parallax Scrolling)效果搭配时,能为静态的插画注入生动的动感与视觉亮点,极大地提升用户的浏览体验。 作为一份灵感图库,文章主体展示了超过二十个风格各异的优质案例。从 Francesco Mugnai 的个人站点到 Web Design Lab,从儿童在线社区 DIY.org 到游戏网站 Adventure World,这些作品共同勾勒出手绘风格在不同行业中的灵活应用。最后,文章提供了更多高清案例的集中画廊入口,方便读者按图索骥,深入探索这种充满手作温度的设计语言。

IT 2013-02-28 23:56:02 / 累计浏览 2,872

一些产品经验

这篇讲的是蝉游记这款旅行产品在开发过程中,一些具体而微的产品设计权衡与实践心得。 作者从几个常见的产品决策点出发,坦率分享了背后的考量。比如,要不要提供独立注册?他基于用户反馈(一千多条抱怨中仅3条提及)和行业趋势,选择了用社交账户登录来简化流程,并认为这增强了反spam能力。再如,何时引导用户完善资料?他将用户行为划分为浏览、轻度互动(如点赞评论)和重度操作(如写游记)三级,只有当用户试图进行后者时,才要求其完善资料,以此在流程顺滑与资料完整间取得平衡。 文章还讨论了新手引导和导航布局的简化。作者摒弃了全屏蒙层引导,转而采用内联的、与操作强相关的小型提示,并设计了一种“弹到死”的机制来确保关键交互被学习。在导航上,他将底部Tab从常见的4-5个精简为3个,核心观察是:用户并不会因界面空旷而去点击陌生图标,反而会被清晰的文字按钮和内容本身所吸引。 尽管作者自谦这些细节“无足轻重”,但整个分享恰恰体现了优秀产品经理对用户心理的揣摩、对数据的尊重,以及在产品纯粹性与用户习惯之间的反复推敲。这些基于实际产品的“脑力体操”,或许比任何理论都更能给同行带来具体启发。

IT 2013-01-22 22:05:31 / 累计浏览 3,194

关于字体设计

字体设计正逐渐成为设计师的核心能力之一,既能规避版权风险,又能让设计更贴合特定场景。这篇文章从作者的实际阅读经验出发,整理了四个风格各异的字体设计资源网站,帮助同行们高效获取学习材料。 这些资源之间的关键差异十分明显:“精思巧形”是一个专注字体符号设计的博客,教程实用且基础扎实,特别适合设计新手打牢功底;“夜话字体”则转向视频教学,通过更直观的演示深入讲解设计细节,满足了偏好动态学习的读者需求;相比之下,“字体社”展示了大量纤细怪巧的字体设计,这些作品虽然日常实用性有限,但在需要独特视觉表达的特殊场合能带来灵感;而“字体传奇”以质取胜,尽管更新不频繁,但每篇文章都写得详尽用心,教程深度适合希望钻研字体设计原理的读者。 通过这种对比,设计师可以根据自身阶段选择:入门推荐“精思巧形”的系统教程,进阶学习可参考“夜话字体”的视频详解,创意发散时“字体社”的怪巧设计能激发新思路,至于想深入理解字体设计内在逻辑的,不妨跟随“字体传奇”的扎实内容一步步探索。这样的整理不仅节省了筛选时间,更让不同需求的设计师都能找到匹配的学习路径。

IT 2012-12-23 23:00:55 / 累计浏览 3,047

登录图的趣味设计

这篇讲的是登录页面左侧banner的趣味性设计。与更注重信息传达的首页banner不同,登录页的这个位置更适合做情感化设计,其中趣味性是关键。 文章将趣味设计拆解为两个可操作的部分:主体元素的创意和背景元素的处理。作者重点分享了三种提取创意的实用手法。第一种是“线描”,它源自现实场景,通过线条的粗细和颜色调整,能创造出简洁又有张力的效果。第二种是“夸张”,以现实实物为蓝本,对其局部进行放大或变形(例如将一层货车夸张为三层),从而增强表现力和趣味。第三种是“重构”,将原本不相关的元素(如灯泡与建筑)通过正负形等设计手法重组融合,带来眼前一亮的感觉。 主体元素确定后,背景处理则相对自由。文章列举了笔刷、色块堆积、不规则形状、羽化、水粉等几种常见手法作为补充。整体来看,这篇文章为设计师提供了从找寻创意点到完成背景的清晰路径,展示了如何通过具体的创意方法,让功能性区域变成传递情感、增加品牌亲和力的小窗口。

IT 2012-12-19 13:33:52 / 累计浏览 5,356

界面设计速成

这是一套以 GIF 动图形式呈现的界面设计视觉教程。文章没有任何文字讲解,而是用 27 张连续的动图,直观地演示了一个界面从无到有、逐步完善的设计过程。 从第一张图开始,你就能看到一个基础的线框结构。随着图片的推进,设计者会逐步添加细节:先是确定核心功能区块的布局,接着加入按钮、文字、图标等交互元素,然后通过调整间距、对齐方式来建立视觉层级,最后通过色彩和阴影的微妙变化来提升界面的质感和可用性。整个过程像一场快进的设计回放,清晰地展示了从草图到成稿的思考路径。 这种“纯视觉”的呈现方式剥离了理论说教,非常适合设计新手直观感受布局逻辑与细节处理的先后顺序。它不像传统的步骤图那样静态,动图的连续性让你能捕捉到每一个微小调整带来的整体观感变化,这或许正是它“速成”的秘诀——用最直接的方式,培养你对界面平衡与美感的直觉。

IT 2012-11-13 13:47:15 / 累计浏览 4,030

浅谈设计中的逻辑

这篇讲的是设计中潜藏的逻辑脉络。作者从逻辑的本源出发,结合自身经验,提炼出五种影响设计决策的思维模式。 文章首先介绍了经典的“古腾堡图表”阅读逻辑,即人的视线习惯于从左上角移向右下角,并通过一系列品牌海报案例,展示了如何利用这一规律引导用户视觉焦点。接着,阐述了“直线式逻辑”如产品详情页般自上而下、环环相扣的严谨性,以及“金字塔式逻辑”在网站架构中构建清晰层级关系的应用。 更有趣的是对“曲线式逻辑”的探讨。作者类比奢侈品市场中“越贵越买”的非理性消费现象,提出当产品的领先性与用户强烈欲望相结合时,也能形成一种突破常规但有效的设计推力,苹果产品就是例证。最后,文章回归到设计的基础——“网格”,强调它既是保持页面稳定、赋予元素秩序的框架,也是设计师在合理运用后可以灵活打破以创造惊喜的工具。 作者并未将设计逻辑视为刻板的教条,而是作为理解视觉沟通、平衡规范与创新的透镜。文章通过具体的模型和案例,为设计师提供了审视自身工作的多维视角。