Code Monkey home page Code Monkey logo

sogou-input-skin's Introduction

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

🔧 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 用户作为收藏操作),开源精神也需要精神支持 😜。

sogou-input-skin's People

Contributors

jrfeng avatar xiaochunjimmy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

sogou-input-skin's Issues

感谢作者

皮肤很精致,石墨很好看,希望能有个一个夜间模式的石墨(好像自带的可以,这个issue就关了),em....

Windows 版预览图

1. Tron 创:

1 Tron_preview

2. Tangerine 橘色:

2 Tangerine_preview

3. Graphite 石墨:

3 Graphite_preview

4. Boundary 界线:

4 Boundary_preview

5. Matrix 矩阵:

5 Matrix_preview

Mac 使用 Tron.mssf 报错 Tron 皮肤不完善

操作系统:
Darwin sakura 19.6.0 Darwin Kernel Version 19.6.0: Tue Jan 12 22:13:05 PST 2021; root:xnu-6153.141.16~1/RELEASE_X86_64 x86_64
问题描述:
双击 Tron.mssf 后,报错 'Tron 皮肤不完整‘
image

如何运行光标提示

请问各位大佬以及宝藏博主 ,Win11系统 的搜狗输入法,如何才能开启光标提示功能呢?

留言致谢,另外卷轴模式的机制太扯淡了

最初是不解卷轴模式下的错位问题,搜索到这里来的。
.plist 文件检查很多遍,甚至在皮肤编辑器中新建皮肤,不改变任何参数保存,再与自带默认皮肤比对,也没有发现问题在哪里。
没想竟然是由皮肤ID白名单控制的😂
这有点过分了,不发布皮肤并通过审核的话,不是连测试也不行么?

故留言感谢解惑,且每个皮肤都那么漂亮!

我很好奇,你是怎么发现的?

附上我的皮肤效果:
Input_theme

请问收个候选字能否设置背景色?

查了下 Windows 版搜狗有个属性是 zhongwen_first_bk_color 用来搞这个的,不过 Mac 的没查到——Google 皮肤制作压根就没啥文章介绍,残念。

类似mac 原生输入法效果:
WX20190722-170811@2x

请问Windows下要如何添加白名单?

卷轴展开的时候样式有bug。
在Windows下找过SystemSkins这个文件,和其他类似名字的 ,都没找到。Windows下是只有默认皮肤能在卷轴模式下不出bug吗?官网下的皮肤也有bug。求解决方法,谢谢!

windows版本的能隐藏拼音输入吗

大佬您好 我想问下,windows能像苹果那样输入吗,就是拼音不显示在输入法的输入框里,输入框直接显示的候选字
像下面这张图一样
图片

windows石墨皮肤候选间隔

windows石墨皮肤阴影版分窗口显示拼音和候选间隔太大,其他版本的间隔就刚好,希望能优化,非常喜欢石墨。谢谢,辛苦。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.