▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 2941 字，預(yù)計(jì)閱讀  8 分鐘

TCC 情報(bào)局的 第 54 篇 干貨分享

2021 年的 第 42 篇

TCC 推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是李澤慧。設(shè)計(jì)是一件需要花費(fèi)大量時(shí)間琢磨細(xì)節(jié)的工作，同時(shí)在某些時(shí)候又需要在短時(shí)間內(nèi)完成，因此提高設(shè)計(jì)效率，節(jié)省不必要花費(fèi)的時(shí)間就是非常有必要的了。推薦這篇文章是希望大家可以學(xué)會(huì)如何提升設(shè)計(jì)效率，把更多的時(shí)間花在創(chuàng)意上來(lái)嘗試更多的設(shè)計(jì)思路，創(chuàng)造更全面的解決方案。

近些年來(lái)，在工作流程中，設(shè)計(jì)的效率越來(lái)越高。這涉及很多原因，其中一個(gè)是 設(shè)計(jì)工具的革新使我們的工作流程變得更加快捷簡(jiǎn)單 。近幾年，設(shè)計(jì)系統(tǒng)更是進(jìn)行了一次大規(guī)模的進(jìn)化，包括組件和設(shè)計(jì)庫(kù)。我們也掌握了許多行之有效的方法，在項(xiàng)目中，我們可以利用這些已有的經(jīng)驗(yàn)快速產(chǎn)出設(shè)計(jì)解決方案。

一般來(lái)說(shuō)，設(shè)計(jì)就是一段尋找問(wèn)題解決方案的旅程

這里有另一個(gè)比較現(xiàn)實(shí)的說(shuō)法：在全球經(jīng)濟(jì)衰退的今天，公司無(wú)法像之前一樣承擔(dān)大量的設(shè)計(jì)工作，但他們依舊期待能夠得到和之前類(lèi)似的結(jié)果。

我來(lái)分享兩個(gè)能夠幫助你快速進(jìn)行設(shè)計(jì)的基礎(chǔ)訣竅。當(dāng)然，在 發(fā)現(xiàn)問(wèn)題 、厘清問(wèn)題 、由淺入深地解決問(wèn)題 方面，也有很多可以提升設(shè)計(jì)效率的辦法。讓我們先從簡(jiǎn)單的開(kāi)始吧。

在 8 小時(shí)的工作時(shí)間里，設(shè)計(jì)和解決問(wèn)題所花費(fèi)的時(shí)間實(shí)際只占一小部分。有很多花費(fèi)在重復(fù)行為上的時(shí)間是我們可以節(jié)省的。

為什么要提高設(shè)計(jì)速度？

Why speed design?

以上需要加快設(shè)計(jì)效率的理由都是對(duì)的，但也都是出于商業(yè)原因。我想要從 “設(shè)計(jì)師也是人” 這個(gè)角度討論一下這個(gè)問(wèn)題。

通過(guò)工作時(shí)長(zhǎng)來(lái)計(jì)算收入已經(jīng)是過(guò)時(shí)的做法了，當(dāng)我們?cè)诩夜ぷ鲿r(shí)，肯定應(yīng)該根據(jù) "工作成果" 來(lái)計(jì)算你的工作收入。首先估算你的工作成本，然后再開(kāi)始工作。不要擔(dān)心你需要花費(fèi)的時(shí)間。

你可以在更少的時(shí)間內(nèi)完成同樣的工作。你會(huì)選擇哪一種方式呢？

如果你能夠很好地評(píng)估并掌握高效設(shè)計(jì)的技巧，作為一個(gè)設(shè)計(jì)師，你將擁有更多的時(shí)間去做別的事情。你可以很快地完成 UI 設(shè)計(jì)，然后用 剩下的時(shí)間去學(xué)一些新技巧或者干脆放松一下 。

世界飛速發(fā)展，但這并不意味著你必須像倉(cāng)鼠跑輪一樣一直保持奔跑。只是在短時(shí)間內(nèi)保持高度專(zhuān)注并提升工作效率。按照你的方式，完成工作，剩下的就是你自己的時(shí)間了。

復(fù)利效應(yīng)

Compounding effect

當(dāng)當(dāng)當(dāng)！現(xiàn)在開(kāi)始就是重點(diǎn)內(nèi)容了！我們要爭(zhēng)分奪秒 。是的，每一秒。

但是當(dāng)這些行為成為你的習(xí)慣，積水成淵，慢慢的，你節(jié)省的時(shí)間會(huì)匯聚成幾小時(shí)、幾天、幾周。如果你在工作中的每件小事上都節(jié)省一兩秒鐘，最終你節(jié)省的時(shí)間將會(huì)超出你的想象。如果一個(gè)技巧能幫助你在每小時(shí)節(jié)省 8 秒鐘 ，那么一年中，這個(gè)技巧就能幫你節(jié)省整整 4 小時(shí)間工作時(shí)間 。如果你同時(shí)使用很多技巧，并配合適當(dāng)?shù)乃季S方式，你一天就可以節(jié)省一個(gè)小時(shí)。

當(dāng)然，基于以上比例，這個(gè)畫(huà)面上放不下4小時(shí)的長(zhǎng)度

掌握輕移、移動(dòng)和重移

Master the Nudge, Push & Shove

讓我們從基礎(chǔ)開(kāi)始吧。如果你仍然使用鼠標(biāo)來(lái)將 UI 矩形移動(dòng)到它的目標(biāo)位置，你應(yīng)該立即停止這種操作！這里有幾個(gè) 將對(duì)象移動(dòng)到正確位置的更高效的方式 。

1）輕移

選中對(duì)象 ，按下鍵盤(pán)上的方向鍵 。在上面的例子中，按下向右的方向鍵，藍(lán)色的框便移動(dòng) 1pt。你按多少次方向鍵，藍(lán)框就會(huì)移動(dòng)多遠(yuǎn)。但是如何一下子將對(duì)象移動(dòng) 10pt 呢？按 10 次方向鍵將會(huì)浪費(fèi)大量時(shí)間，對(duì)嗎？

2）移動(dòng)

移動(dòng)是 SHIFT 鍵和方向鍵的組合 ，支持一次性將對(duì)象移動(dòng) 10pt 。

我知道這對(duì)你來(lái)說(shuō)太簡(jiǎn)單了。再說(shuō)一個(gè)基礎(chǔ)操作，然后我會(huì)給你展示點(diǎn)更酷的。

3）重移

插件允許你做更多的事，一個(gè)名為 “Nudge，Push，Shove” 的 Sketch 插件新增了一個(gè) “shove” 選項(xiàng)，能夠幫助你實(shí)現(xiàn)以上三個(gè)需求。當(dāng)你同時(shí) 按下 ALT+SHIFT 和方向鍵，就可以以 15pt 為默認(rèn)基準(zhǔn) ，快速移動(dòng)設(shè)計(jì)對(duì)象 。這三個(gè)基于鍵盤(pán)的移動(dòng)小技巧是提高設(shè)計(jì)速度的基礎(chǔ)操作?；蛟S你早已知道了，現(xiàn)在讓我們來(lái)看點(diǎn)有趣的吧。

看！是魔法！

你可以將 輕移 、移動(dòng) 、重移組合起來(lái) ，以減少完成一件任務(wù)的點(diǎn)擊次數(shù) 。讓我們來(lái)看看下面這個(gè)特例：以下是兩個(gè)間距為 63 像素的方塊，我想把他們的間距調(diào)整到 55pt。

63pt - 55pt = 8pt

我們應(yīng)該怎么做？有兩個(gè)辦法可以達(dá)成目的。 

首先是 "笨辦法"，大多數(shù)學(xué)生在初課堂上都會(huì)選擇 輕移對(duì)象 8 次 來(lái)解決這個(gè)問(wèn)題，這是簡(jiǎn)單而直接的，但需要你 點(diǎn)擊 8 次方向鍵，這會(huì)花費(fèi)好幾秒鐘 。

這里有另一種更好的方法可以達(dá)成目的。這需要你有 敏捷的數(shù)學(xué)思維 ，但是你一旦嘗試過(guò)這樣的操作，就會(huì)發(fā)現(xiàn)它可以 運(yùn)用一次輕推來(lái)解決這個(gè)問(wèn)題 ，這將大幅 提高你的工作效率 。

如上圖，你可以通過(guò)一次 以 10pt 為基準(zhǔn)的移動(dòng)和兩次反向輕移 來(lái)完成這個(gè)操作。這就節(jié)省了 5 次按鍵時(shí)間。當(dāng)然你也可以利用以 15pt 為基準(zhǔn)的重移，但這需要稍微多一點(diǎn)的努力和更快的數(shù)學(xué)思維。

快捷鍵的優(yōu)勢(shì)

即使你每次只能節(jié)省 3-4 秒鐘，但這是你在設(shè)計(jì)過(guò)程中經(jīng)常會(huì)進(jìn)行的操作。從長(zhǎng)遠(yuǎn)一點(diǎn)的角度來(lái)看待這件事。

你可以通過(guò)這種簡(jiǎn)單的小技巧節(jié)省幾個(gè)小時(shí)

如果你在 8pt 柵格系統(tǒng)里做設(shè)計(jì)，你可以使用插件按需求 改變輕移 / 移動(dòng) / 重移的默認(rèn)基準(zhǔn)值 。舉個(gè)例子，你可以把 默認(rèn)基準(zhǔn)值從 1/10/15 改成 1/8/16，這會(huì)大大 提高你的工作效率 。

DIY 圖標(biāo)

DIY Icons

如果你是在已經(jīng)設(shè)置好的規(guī)范（例如設(shè)計(jì)系統(tǒng)）中做設(shè)計(jì)，這個(gè)小技巧將會(huì)節(jié)省你很多時(shí)間。在一般情況下，如果你想在項(xiàng)目里添加一個(gè) icon，你需要打開(kāi) icon 包找到它，復(fù)制它，并粘貼到文件中正確的位置上。或者在硬盤(pán)里找到一個(gè)獨(dú)立的 SVG icon，直接把它拉到你的畫(huà)板上。

這是一個(gè)效率很低的辦法。

你知道嗎？那些常用的 icon，例如箭頭、v 形線(xiàn)條、放大鏡……都可以 通過(guò)設(shè)計(jì)工具快速完成 。很多時(shí)候，自己繪制一個(gè)簡(jiǎn)易的 icon，其實(shí)要比你去 其他外部文件里尋找要加快速。（一定要加強(qiáng)基本功的練習(xí)，不要過(guò)度依賴(lài)各種圖標(biāo)平臺(tái)）

UI 設(shè)計(jì)師非常需要提升他們的工作效率。顯然，這些 提升工作效率的小技巧都來(lái)自平時(shí)大量的練習(xí) ?，F(xiàn)在就可以開(kāi)始練習(xí)了，即使你只是一個(gè)初學(xué)者。

節(jié)省這些時(shí)間會(huì)讓你擁有更多時(shí)間來(lái)學(xué)習(xí)其他事物 。如果你有更多提升效率的小技巧，也可以分享給我。

原文：https://uxdesign.cc/speed-techniques-to-help-you-design-faster-f61f4f37bce7

作者：Michal Malewicz

譯者：鄭伊妮

審核：劉倩茹、李澤慧、張聿彤

編輯：孫淑雅

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

---

往期精選文章：

這些色彩心理學(xué)知識(shí)教你如何傳遞信息

案例研究｜康奈爾大學(xué)副業(yè)社區(qū)網(wǎng)站設(shè)計(jì)

Web Vitals —— 谷歌的新一代 Web 性能體驗(yàn)和質(zhì)量指標(biāo)

網(wǎng)頁(yè)設(shè)計(jì)師能從日式美學(xué)中學(xué)到什么？

案例研究｜一款為你帶來(lái)難忘體驗(yàn)的美食 APP

如何制作打動(dòng)面試官的作品集，這里有一份完整的指導(dǎo)手冊(cè)

如何做好用戶(hù)體驗(yàn)項(xiàng)目？從一個(gè)好計(jì)劃開(kāi)始

如何建立設(shè)計(jì)系統(tǒng)

如何把握不同層級(jí)用戶(hù)的需求：回歸本質(zhì)，打磨信息架構(gòu)

TCC 視野｜2021 年用戶(hù)體驗(yàn)設(shè)計(jì)趨勢(shì)分析

---

- 設(shè)計(jì)師自習(xí)社區(qū) -

TCC 設(shè)計(jì)情報(bào)局歡迎小伙伴加入，一起交流設(shè)計(jì)知識(shí)，了解全球設(shè)計(jì)資訊，鍛煉英文能力，發(fā)掘更多可能性～

添加小助手微信，備注「社群」，即可加入讀者群。