/Sogou-Input-Skin

搜狗拼音输入法的几款极简风格皮肤

自用的搜狗拼音输入法皮肤,重新对素材进行了无损压缩,调整了细节,分享给大家。

🔧 2024年01月14日更新 修正了 GitHub Repo 中缩略图链接损坏的问题;新增 Figma 设计稿地址;

🔧 2022年10月06日更新 在 v1.4 中修复了系统/输入法更新导致的皮肤候选项和翻页箭头不居中的问题;

🎉 2021年03月07日更新 新增 Carbon 碳黑皮肤风格;

🎉 2020年11月29日更新 在 v1.3 中修复了苹果系统更新导致的 5 款皮肤候选项和翻页箭头不居中的问题,感谢 Hugh Sun的反馈并邮件提供了部分调整支持!❤️

🎉 2019年6月14日更新 新增 Windows 版输入法皮肤,预览图,感谢 jrfeng !❤️


设计理念

由于原本是为了自用,所以在风格和理念上都是按照我自己的喜好来的:简洁纯净,剥离过分设计带来的视觉纷扰,享受打字时的简单和愉悦...


1. Tron 创

Tron

Tron 是我使用最久的一款皮肤,名称源自于我非常喜欢的一部视觉大片《Tron: Legacy》(中文名称《创: 战纪》),如果用两个颜色来代表科技感,那么它一定是蓝色和白色,正如《Tron》系列。色彩上采用饱和度较高的蓝色,彰显其个性与特点。


2. Tangerine 橘色

Tangerine

Tangerine 名称取自于同名电影《Tangerine》(中文名称《橘色》),比较值得一提的是,本电影全程用 iPhone5s 拍摄,后期通过手机 App 进行调色。并不是因为导演像陈可辛、贾樟柯一样在给苹果打广告,是因为导演真穷,买不起专业设备,可能连防抖云台都买不起,所以画面也有点抖。题材比较敏感,剧情不好评价,感兴趣的小伙伴自己感受一下。


3. Graphite 石墨

Graphite

Graphite 石墨 是最近才制作的皮肤,也是我最近一直在用的皮肤,它的设计初衷就是“尽可能简单”,希望最终呈现给用户的感受是“没有设计”,就像毫尖蘸墨轻拂宣纸一般自然纯粹,配色采用黑与白(考虑对比度过于强烈带来的视觉疲劳,没有采用纯黑),黑如墨,白如纸,取名石墨。


4. Boundary 界线

Boundary

Boundary 是一款无阴影的皮肤,文字候选框与背景在视觉上紧密贴合,采用深色边框构成界线以区分候选框与背景,即使在色彩杂乱的背景上亦能清晰定位内容焦点,构成视觉饱和的同时不失简洁优雅,甚至还稍微有点复古。设计思路来自 Testdog 同学的 建议


5. Matrix 矩阵

Matrix

Matrix 名称和风格取自同名电影《Matrix 黑客帝国》,因此风格设定也比较有极客色彩。严格来说,这并不是一款针对夜间模式的皮肤,一方面搜狗输入法并没有针对页面模式的皮肤自动适配能力,而为了夜间模式手动切换输入法皮肤其实也是一个比较反人类的交互行为;另一方面很多用户即使在白天也喜欢使用 Dark Mode 深色模式,因此皮肤的配色并不是完全针对夜间场景进行适配的,稍微加强了对比度和饱和度,又重新调整了黑客帝国代码绿的色相,使得皮肤看起来更具设计感。


6. Carbon 碳黑

Carbon

Carbon 碳黑,参照石墨风格制作的深色模式,喜欢石墨又喜欢用深色模式系统的同学可以试试,还不是很成熟,有时间再慢慢优化;


使用方法

方法一:下载本项目,Mac 版用户请找到 mssf 文件,双击即可完成皮肤安装和切换。

Windows 版请在 for_windows 文件夹下找对应的 ssf 文件。

方法二:如果方法一没有成功,可以通过打开搜狗输入法的的 [偏好设置],然后在最顶部 Tab 栏选择 [外观],然后点击左下角的 [+] 加号按钮,从本地目录里选择 mssf 文件就可以了,也可以直接拖动 mssf 皮肤文件直接到 [外观] 设置项的面板中(感谢 J3n5en 同学在 issue 中提醒)。

附:下拉候选项样式异常解决办法

安装过后,你可能会发现使用 Mac 搜狗输入法的卷轴模式的话,会出现样式异常问题,类似下图(以Boundary 皮肤为例):

卷轴模式样式异常

搜狗输入法设定为:只有在皮肤商店上架(白名单)的皮肤在 “卷轴模式” 下才能完美展示,否则下拉卷轴展示效果稍微不太美观 ;而上架皮肤商店需要审核,到目前为止还没有收到审核通过的消息。所以如果你希望本皮肤在 “卷轴模式” 下完美展示,可以通过手动修改本地白名单的方式来进行。

Mac 修改白名单方法:

  1. 打开 finder,然后在 finder 浏览器下按 Command + Shift + G 打开跳转窗口,然后在文本框内输入 /Library/Input Methods/SogouInput.app/Contents/Resources 后敲回车,就打开了搜狗输入法的资源文件目录。

  2. 将资源目录中的 SystemSkins.plist,替换为本项目列表中的同名文件 SystemSkins.plist,替换后重新切换一下皮肤即可。

    本文件是在最新的(2022年10月07日)白名单皮肤基础上,添加了以上几个皮肤。其他没有修改。或者你也可以提前备份一下原来的文件,自己手动添加以上皮肤。

替换上述文件并重新切换激活皮肤之后,卷轴模式下拉候选项的样式应该变成这样了:

卷轴模式样式正常


设计相关

剩下这部分内容给热爱折腾的朋友,如果你也想做属于自己的皮肤:

设计软件:Figma

用于绘制和导出皮肤需要的基本素材,你也可以使用 Sketch、Photoshop 或 Illustrator等其他设计软件(最早使用的 Sketch 进行绘制,近期导入到 Figma 分享和管理,从零开始学习 UI 设计软件的话,推荐 Figma)

本项目 Figma 设计稿地址:Sogou-Input-Skin (请不要申请编辑权限,复制一份到自己的草稿中编辑)

压缩工具:image-optim

用于压缩设计工具导出的图片素材,Sketch 在无插件情况下,默认导出的 PNG 是没有经过高级压缩的,而PNG格式的图片可以在压缩工具下再次进行无损压缩,降低皮肤体积,经测试,压缩率在50%左右。

制作工具:搜狗皮肤编辑器 for Mac

搜狗官方皮肤编辑工具,目前还有点小bug(v1.0.0),似乎几年未更新了[🤦‍♀️]

可以使用上面的皮肤编辑器打开我的皮肤.mssf文件,在此基础上二次调整。也可以参考我的皮肤尺寸进行素材的设计。

如果还有什么疑问,或者有什么建议,可以在 GitHub 上 创建 issue来反馈提问。


精神支持

如果你喜欢我的皮肤,可以在 GitHub 本项目右上角点一下 Star 来支持我(Star 一般用于支持,也常被 GitHub 用户作为收藏操作),开源精神也需要精神支持 😜。