重新设计划词翻译的界面

[lmk123]

截止今日（2016年1月29日），划词翻译在 Chrome 网上应用店上有 83350 个用户。用的人多了，吐槽界面的用户就多了。我也觉得划词翻译的界面及用户体验差强人意，但我本人是一个只会写代码的设计盲，所以想请有经验的人帮我重新设计划词翻译。

如果你无偿提供你的设计，那么我会在划词翻译的描述里加上你的相关信息，例如“感谢 XXX（你的个人网址）无偿帮划词翻译设计主题”。

需要设计这些东西：

• 120px x 120px 的 logo（PNG）
• 网页划词翻译的界面（PSD）
• 右上角的弹出页的界面（PSD）
• 设置页的界面（PSD）
• 1280px x 800px 或 640px x 400px 的屏幕截图三张（PNG），用于在 Chrome 网上应用店的程序安装页面显示
• 440px x 280px 的小图片（PNG），用于在 Chrome 网上应用店的搜索页显示
• 920px x 680px 的大图片（PNG）
• 1400 x 560 的滚动图片（PNG），用于在 Chrome 网上应用店的滚动展示区域显示

总的来说，划词翻译需要设计一个 logo、六张展示用的图片和三个产品设计图。

你可以以 Pull Request 的形式提交你的设计：在 external 文件夹下新建两个文件夹 webstore 与 UI，其中六张展示用的图片放在 webstore 文件夹下，三张产品设计图放在 UI 文件夹下，最后，logo 图片请直接替换现有的 logo。

[yra99ary]

I would like to help you,
As your description above, you want to improve your UI and UX for user.
I think we could discuss the flow first and make sure every detail is correct.

[lmk123]

Hi @yra99ary ，我可以用中文跟你交流吗？我英文不太好，所以才有了划词翻译 😆

很抱歉我回复的比较晚，但是我很感谢你愿意帮助划词翻译改善 UI 与 UX。

我刚才更新了描述，你看看这个流程可以么？

[yra99ary]

Hello,
@lmk123
個人經驗：
要改進一個現有產品的使用者體驗是需要一段時間的，
一開始通常是從流程去著手，不知你手邊有沒有划词翻译的流程圖可以分享，
因為在改善流程後，後續再設計介面也就沒什麼太大問題了。

[lmk123]

@yra99ary 我刚才画了一幅划词翻译的流程图，比较简陋 😆
https://www.processon.com/view/link/56acc332e4b0ed3b649428d0

[yra99ary]

@lmk123
今天人都在外面晃，流程圖還沒細看。

不過我有先幫你設計一個Logo，我有上傳到Dribbble ，
社群的評價都很不錯。

劃詞翻譯Logo
1.
它是一個地球儀的概念，帶有更換地區（翻譯）的意涵。
2.
你可以注意到右下的軸與球面的陰影，
會組成一個鼠標，平常使用劃詞翻譯都是用鼠標反白某一段詞或是句字，再進行翻譯。
3.
地球上的綠色是隱喻鼠標反白的顏色，
這個顏色是基於你原本的主色再微調而來。那當然原本的#24CF70也是很不錯的。

希望你會喜歡 :)

[lmk123]

@yra99ary 这几天因为划词翻译被 Chrome 网上应用店删除了搞得我焦头烂额，所以回复迟了，抱歉，不过我真是太喜欢这个 Logo 了！

[yra99ary]

@lmk123
哈，難怪chrome都搜不到劃詞翻譯。
那你想到解決方法沒？

[lmk123]

@yra99ary 把网页翻译功能删掉之后就能上架了 😅

[yra99ary]

@lmk123
我目前看完你第一部份的流程，沒啥太大問題。
不過在介面的呈現上可能要稍作修改。

下面列出幾點跟您討論：

• 原版的介面顏色太過突兀，影響到閱讀文章的流暢感。
• icon的大小不一致。
• 翻譯出來的結果不夠明顯（字體大小、排版）。
• 發音按鈕的位置直接出現比較合理。
• 右上角的選擇翻譯引擎直接顯示引擎名稱比較直覺。
• 右下角的開啟對應翻譯引擎的功能，我把它理解成使用者想要看更多關於此字的定義，
  故把它移到字詞的旁邊。
• 左下角的套件開啟狀態應該去掉，當使用者劃詞劃不出翻譯時自然知道沒有開啟套件，
  在chrome的右上角也能觀看套件開啟狀態。

下圖為我重新設計過的介面：

[lmk123]

@yra99ary 非常感谢你的设计！我很喜欢这种简洁的界面！

按照你的描述，你现在使用的可能是 v5.6.1 版本，最近我已经在 Chrome 网上应用店里发布了 v6.0 版，其中新加了一个功能就是能直接在翻译窗口里选择源语种和目标语种、输入文本并翻译，很抱歉我忘记提醒你需要删除之后重新安装一下 😅

[yra99ary]

@lmk123
我看完6.0版了，
一句話簡評：
『 把太多有用的功能隱藏起來，出現時又把它們通通擺在一起。』

我理解您想要讓畫面更簡潔的想法，
但按下右上menu時一次出現太多的功能讓使用者沒辦法消化。

設計介面時會使用menu把功能隱藏起來是因為不得已，
這是因為太多功能要展示，只好把不重要的往menu擺。

四點建議：
1.把常用功能往外拉，不要隱藏在menu裡，讓使用者直覺的操作這個套件。
2.把重要的功能往上擺，次要的功能往下擺（像pin的位置就挑得不錯）。
3.右下via某翻譯引擎 與切換引擎的功能合在一起，看到即可挑選（如我上次介面設計所示）

新增的挑選翻譯語種的功能很不錯，不過位置可能要挑一下。

[lmk123]

@yra99ary 界面里功能少的时候我还能勉强应付一下，但功能一多我就不知道这么多东西该怎么摆了，所以我需要有经验的人来帮助我。

再次感谢你的帮助 😁

[yra99ary]

@lmk123
如對介面細節有疑問，都可以提出來，大家一起討論。

[lmk123]

@yra99ary

1. v6.0 版中添加了输入框、各种下拉框及翻译按钮，这些东西要放在哪？
2. 如果用户划选了很长的一个段落，全部显示出来不太好，那是要用省略号将多出的文本隐藏吗？

[yra99ary]

@lmk123
不好意思最近放了長假，
關於第二點，一個段落的確是要用省略號隱藏過長文本，
點擊省略號就秀出全部的文本。

不過對於這個extension的核心賣點，我的理解是：
在瀏覽網頁時，看到不懂的生詞或句子，劃詞立即翻譯。
使用者是想要當下的翻譯結果，所以原本文本就顯得不那麼重要了。
而留下文本是考慮到使用者想要聽原文發音的狀況。

關於第一點的問題，你可能要把圖截出來，因為我想的跟你講的有可能不一樣。

[lmk123]

@yra99ary 没关系我也放假了的 😄

是这样的，你的界面应该是基于 v5.6.1 来设计的，不过 v6.0 中我添加了这些功能：

我新增了一个文本输入框，这样用户就可以像在右上角的弹出页那样自行输入内容进行翻译了，但是你的界面中没有这个输入框 😄

另外如图所示，v6.0 现在也可以选择语种了，但是语种列表比较长，在界面中应该怎么展示？

[zoujialing125]

无意间发现这个插件觉得非常好用，不过我也觉得界面需要改进下。。我个人觉得别的没什么，唯独配色有点接受不了，绿色实在有点太扎眼了，希望作者能考虑将界面改为可透明的，配色改为白色或灰色或接近网页背景色的颜色组合，当然如果提供调色板自己设置就更好了。。。

[lmk123]

@zoujialing125 我本人基本上没有设计能力。。现在划词翻译的功能差不多都完备了，最大的问题就是界面了。

但是提供调色板设置背景色也没必要吧。。

[zoujialing125]

@lmk123 哈哈，背景色设置确实不是什么必须的功能，关于界面其实也简单，布局什么的我没什么太多建议，能抓住翻译内容的重点就行。主要就是配色尽量避免大的高亮色块，如果要用有颜色的边框可以用粗线条加暗一点的配色，界面背景还是白色好些。我觉得那样自然些。你可以借鉴下有道啊，或者谷歌翻译的chrome插件的弹出框设计。

[lmk123]

无进展，所以还是关了吧。