Sketch產品再設計: 如何提升完善型產品的體驗

1 評論 10085 瀏覽 31 收藏 16 分鐘

重新設計現有產品不是一件簡單的任務。許多人認為,當提到“再設計”這個概念的時候,他們將此理解為產品從零開始的設計過程,至少在設計團隊這不是最佳方式,因為這面臨著很大的風險?!皩Ξa品的現有價值會造成什么影響”,這個是最常關心的問題。許多人僅僅因為害怕損害產品價值,就繼續(xù)在現有產品上堆疊新功能。這個當然能被理解,但從長遠來看,那個產品將失去創(chuàng)新能力,并將淪為四不像。

對于“一個更高效地重新設計過程”這個話題,我有一些想法。但為了檢驗這一想法,我不想在一個很蹩腳的產品上進行設計,因為這將是很容易解決地。所以我選擇“Sketch”,是出于以下兩點原因:

  • 第一,Sketch不是一個差的產品;事實上,它相當不錯并且在市場上也是一個很棒的產品。怎么去將現有的產品的體驗做得更好呢?這點很有挑戰(zhàn)而且很有意思。
  • 第二,因為我每天用Sketch,所以我相當熟悉這個產品。我認為對于產品有一個深度的見解是很非常重要的。

免責聲明:通常在一個真實的Redesign項目中,你需要將許多用戶的反饋意見以及其他利益相關者、設計師們的立場考慮進去。在這個案例中,出于實際情況,我僅從我的使用反饋進行考慮。

第一步

首先,從高緯度到低維度對產品進行分析。我們需要清楚地知道哪里需要調整、哪里是現有產品的價值所在。當我提到從高緯度這個概念的時候,我想說的是去評估產品的核心目標:

  • 問題:產品是否滿足基本的用戶期望?
  • 回答:如果回答是肯定的話,那么無需打破這個設計,然后可以繼續(xù)。

對于上述問題的答案是否定的話,那么就需要從根本上審查產品,審查戰(zhàn)略規(guī)劃、KPI等方面,但我不想讓你忍受這些花哨的術語。

技術分析

現在讓我們開始從技術上分析這個產品是如何工作的,以及它如何解決用戶的需求,就先從界面布局開始。在Sketch里,界面布局是這樣的:

每個區(qū)塊的布局都有一個目標,并且基于每個目標,我們可以找出什么可以改進的。舉個栗子:

  • 區(qū)塊1,目標:在圖層和頁面間導航。這個完全不需要打破再重新設計,但我們可以在視覺層面做一些小幅優(yōu)化來提升展示信息的可理解性、可讀性。
  • 區(qū)塊2,目標:易操作畫板。顯而易見,這個不需要打破再重新設計。我很喜歡目前新建畫板和拖動組織它們以及構建視覺結構的便捷性。就目前而言,此處不需要進行改進。
  • 區(qū)塊3,目標:擁有所有常用工具來管理我的對象的屬性。部分需要打破再重新設計。為什么?因為雖然比Photoshop好用點,但對于新手設計師而言還是有點不知所措。這個區(qū)塊不是重要區(qū)塊,但在視覺層面還可以進行設計優(yōu)化,讓它在視覺上更容易理解。
  • 區(qū)塊4,目標:開誠布公地講,我不知道,但我猜這塊區(qū)域是高級功能區(qū)。這部分可以被打破再重新設計。為什么?因為在屏幕空間上這部分占據太大空間,在我的工作流中這部分的價值很?。≒S:我僅以我自己的體驗反饋來進行設計)。這部分可以設計地更好甚至能幫助提升整體的體驗價值。

好了,現在我們知道主要的挑戰(zhàn)是什么了。當然,每一個挑戰(zhàn)由許多細小的部分和細節(jié)組成。但再強調一點,這個僅僅是一個小的虛擬練習??偠灾?,到現在為止,我們花了些時間來發(fā)現可以幫助我們改進產品而不損害核心價值的東西。換話句話說,我們可以繼續(xù)改進產品同時降低面臨的風險。

樣式/品牌分析

在這里用到了“品牌”這一詞,指得是產品視覺屬性,和我們通常理解的“品牌“不是一個概念。我單獨分離出來了“產品視覺屬性”這個話題。所以,Sketch的品牌狀態(tài)是什么?目前它還不錯但還能改進地更好。Sketch用了許多原生視覺組件。幸運的是,蘋果提供非常不錯的組件庫,但如果我們想在產品上有一個更好的提升,Sketch還需要更原創(chuàng)和可識別性的品牌屬性。

我們怎么做到這一點?我們如何發(fā)現理想的產品屬性是什么?抱歉地是,出于這次練習的目的,我們必須跳過這項工作,因為產品屬性并不容易而且很花費時間,通常設計很多討論、情緒版、用戶訪談等等。因此,我將從一個非常主觀的角度來分析這部分。

對我來說,Sketch需要清晰且易用;這些產品具有的最佳價值。它不像Photoshop那么亂,它非常友好,使用Sketch一段時間你會發(fā)現Sketch沿用了許多蘋果在用戶體驗領域的設計觀念。所以如果這些是視覺帶來的附加價值所在的話,那就基于這點進行改進。設計思路是更簡潔和更易用。

輸出結果

我花了一周時間來重新設計,以下是改進結果:

讓我們看看基于每個區(qū)塊在細節(jié)層面的改進之處:

(1)區(qū)塊1

這個區(qū)塊的設計挑戰(zhàn)僅有幾處;主要出發(fā)點是提升可讀性。首先為了提升可讀性,我們必須了解元素的層次結構:

Pages > Artboards > Layers / Groups > Layers / Groups (…)

這個設計挑戰(zhàn)的解決方式是創(chuàng)建一個更易識別的層次結構,無需改動太多這個產品已有的用戶操作體驗。

這不是太大的設計挑戰(zhàn),但采用了更多的原創(chuàng)性的、簡潔的視覺風格,為此區(qū)域提供更高效的方案。

(2)區(qū)塊2

正如我之前所說,這塊區(qū)域沒有太多東西需要調整的。這塊區(qū)域讓我們有機會能夠放置一些通用功能,諸如縮放、網格、參考線等。我會在區(qū)塊4中進一步說明原因。在啟用參考線功能的情況下,此區(qū)塊的如下顯示:

將這些功能選項放置在此,主要是此功能與主畫板區(qū)的參考線相關,以此來提升用戶體驗。在原來的Sketch版本中,我沒有太多地使用這些功能,不是因為我不想用,而是這些功能和主操作區(qū)域相隔太遠,不易操作。這個設計方案調整了此問題。

(3)區(qū)塊3

這部分相對復雜,因為隨著每個選擇的對象不同而改變。只用一個案例來闡述改進之處,這部分主要是視覺效果?!岸询B”的設計方法非常不錯,有些對象在使用這個解決方案時,視覺組織上不再那么雜亂。

此外,我將經常使用的Craft插件做了展示設計,它非常方便。關于這些插件,我做了一些細微的改進。主要的改進將在接下來的部分進行說明。

(4)區(qū)塊4

這部分是大工作量的處理。這個區(qū)塊是需要花較大精力的部分,讓我們重頭開始看看改進。

我將區(qū)塊劃分成3個區(qū)域:

(1)區(qū)域1

此區(qū)域的目標是提供一個可創(chuàng)建對象的入口?,F在,一切都被合并成一個按鈕,但有兩種對象需要特殊處理:符號和文本樣式。

符號是一個非常強大的功能,它幫助我們不僅節(jié)省大量的時間,它也有助于我們保持設計的一致性,所以如果在我們的設計過程中的符號的入口更明顯的話,那么將更清楚地了解如何更好地使用這些符號。許多設計師甚至都不知道符號到底能做什么,這是一個要解決的大問題。

文本樣式現在作為屬性欄的一部分而存在。文本樣式非常重要,因為在實現設計的時候,就需要在代碼中預定好樣式結構(例如h1,h2,h3,p,鏈接和更多的HTML標簽)。

(2)區(qū)域2

這個區(qū)域是多功能區(qū)域,因為它會根據我們選擇的元素而改變。因此,在我們不選擇任何對象的情況下將會顯示常用對象。這應該是一個非常實用的功能,因為我們總有諸如按鈕、符號或其他在我們設計過程中用到的東西。拖動他們到畫板中就能使用,這是不是非常棒!

在下面的案例中,當我選中了某個對象,上方區(qū)域根據需要進行動態(tài)變化。舉個栗子,當我選中了一個矢量圖形諸如長方形,然后我就可以訪問上方的功能選項來操作那個圖形了。

除了形狀之外還有很多情況,這個區(qū)域可以擴展出更大的便捷性,例如文本、符號、圖片等功能。每個功能都對應著不同的需求。這應該使這部分成為一個更有用、更智能的部分。我這里就不涵蓋所有的用例了,但我想你應該能想到的: )

(3)區(qū)域3

這個區(qū)域是一般功能項,包括Sketch當前缺失的和一些重要的功能項,如插件管理功能。當然,我也知道,你能夠在軟件上方的頂部菜單項中找到這些功能選項。但考慮到插件已經變成一個高頻使用的功能,而且插件也正在擴大產品本身的可能性,所以插件需要一個更合適的功能區(qū),你覺得呢?

其他選項與我們目前在Sketch中看到的一樣別無二致。這里只是一些非常小的調整,諸如改善按鈕的外觀樣式。這樣設計是為了減少整個插件區(qū)塊的高度。這樣做是為了能夠給區(qū)塊2留出更多的空間。

你可能也注意到了我從這個區(qū)塊中刪除了一些功能項,例如參考線、網格、縮放選項。主要原因是為這個區(qū)域的主要功能留出更多空間。老實說,縮放功能是一個常用功能,但我們更多地是使用快捷方式,縮放功能更多地是一種信息展示而不是可交互的對象。還有參考線和網格,也是出于同樣的原因。這些功能項現在更接近主操作區(qū)域 —- 也就是畫板區(qū)域。

補充

沒有一個好的歡迎界面的軟件是一個好軟件嗎?重申一遍,這個練習不是要重新再造一個輪子,因為現在的Sketch也是一個相當好用的軟件。但僅作為我個人意見的調整優(yōu)化…

就是這樣,這是個非常有趣的小項目。我希望這個練習能夠幫助我們更清楚地了解重新設計產品的過程,在每個小決策中使用設計常識。我相信各位大拿能出更好的設計方案。但我還想再建議一下,不要讓你的個人想法干擾產品的主要目標,如果可能的話,邀請你團中的其他人加入進來。

祝愉快!

 

翻譯:Maker

校對:逗砂

譯文地址:微信公眾號【非科班設計】

原文鏈接:https://medium.com/@ederrengifo/re-dise%C3%B1ando-sketch-d616658e907e#.xt38sjlfz

本文由 @Maker 授權發(fā)布于人人都是產品經理,未經作者許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我覺得sk本身的層夠好了,還有頂部的工具欄使用率很高啊,有點好奇你平時是怎么調用工具的?

    回復