vsco

Among the many photo-editing apps, VSCO has definitely become a popular favorite among both experienced photographers as well as “aesthetic” Instagram users. However, my interaction with the app starts and ends with using a few key filters and (maybe) tweaking the exposure or saturation of an image. After taking a closer look at VSCO, I realized just how many features it offers… and how few most users are aware of. On the other hand, I also realized the many features I wished it did have.

在許多照片編輯應用程序中，VSCO無疑已成為經驗豐富的攝影師以及“審美” Instagram用戶的最愛。 但是，我與應用程序的交互開始和結束時使用了一些關鍵濾鏡，并且(也許)調整了圖像的曝光或飽和度。 在仔細研究了VSCO之后，我意識到它提供了多少功能……以及大多數用戶所了解的很少。 另一方面，我也意識到了我希望它具有的許多功能。

* Study done in 2019* 2019年完成的研究

用戶研究 (User Research)

為什么會這樣呢？ (Why is this the case?)

I first began to wonder whether other people had a similar experience with the app. After asking several of my friends for their opinions, I organized their thoughts/complaints/suggestions/praises into the following diagram.

我首先開始懷疑其他人是否對該應用程序有類似的體驗。 向幾個朋友征求意見后，我將他們的想法/投訴/建議/贊揚整理成下圖。

Conducting basic user research and creating an affinity diagram進行基本的用戶研究并創建相似性圖

Their main complaints could be organized into the following categories:

他們的主要投訴可以分為以下幾類：

The app was overwhelming: features seemed too cluttered at times, users mostly stuck to the same few filters/advanced edits

該應用程序不知所措：功能有時看起來過于混亂，用戶大多停留在相同的幾個過濾器/高級編輯上

It had poor organization: the minimalistic design of VSCO was impeding on users’ abilities to organize and group photos

它的組織能力很差： VSCO的簡約設計妨礙了用戶組織和分組照片的能力

The app was unintuitive: the purpose of some icons was not made obvious, certain features were not easily accessible

該應用程序不直觀：某些圖標的用途不明顯，某些功能不易使用

仔細看看應用程序 (A closer look at the app)

After my initial research, I revisited the app in order to find specific areas for improvement. Since the most popular use of the app seems to be its editing features (as opposed to publishing and discovery), I decided to focus on the studio gallery, editing panel, and camera panel.

經過初步研究，我重新訪問了該應用程序，以查找需要改進的特定領域。 由于該應用程序最受歡迎的用途似乎是其編輯功能(與發布和發現相對)，因此我決定專注于工作室圖庫，編輯面板和相機面板。

Markup of VSCO’s current layout and designVSCO當前布局和設計的標記

The VSCO studio lacks any option for organization and can appear overwhelming to users who have imported several photos into their gallery over time. As a result, it is difficult to locate photos, causing users to continuously scroll until happening upon the correct one. The “options” overlay unnecessarily takes up half the screen and darkens the photos beneath it.

VSCO工作室缺少任何組織選項，并且對于隨時間推移將幾張照片導入其圖庫的用戶而言似乎顯得不知所措。 結果，很難找到照片，導致用戶不斷滾動直到碰到正確的照片為止。 “選項”疊加層不必要地占據了屏幕的一半，并使下面的照片變暗。

The main complaints with the editing panel seemed to be that it was overwhelming and took too long to understand. This made sense considering several important editing features, such as the “undo” and “favorite” buttons, were difficult to find—especially for beginners. There was also no option to edit multiple photos at a time, a feature which would greatly reduce editing time for users importing more than one photo at a time.

編輯小組的主要抱怨似乎是它不堪重負，花了太長時間來理解。 考慮到很難找到幾個重要的編輯功能，例如“撤消”和“收藏夾”按鈕，這是有道理的，尤其是對于初學者而言。 還沒有一次可以編輯多張照片的選項，該功能將大大減少用戶一次導入多張照片的編輯時間。

The camera panel strays from VSCO’s minimalistic design in that an overlay of advanced features reduces the amount of space available for capturing an image. This cluttered appearance may be related to why most users opt for simply importing photos into the app rather than using the built-in camera.

攝像機面板偏離了VSCO的簡約設計，因為高級功能的疊加減少了可用于捕獲圖像的空間量。 這種混亂的外觀可能與為什么大多數用戶選擇將照片簡單地導入應用程序而不是使用內置相機的原因有關。

初始設計過程 (The Initial Design Process)

設計一個有組織的工作區 (Designing an organized workspace)

Low-fidelity iterations for a clean “folder” feature低保真迭代，提供清晰的“文件夾”功能

I wanted to add an “album” or “folder” feature where users could organize and narrow down their studio page. VSCO currently offers a rudimentary version of this in that it allows users to filter images based on whether they have been edited, published, or have a certain file type. However, VSCO does not allow users to customize these categories themselves. I created two potential explorations: the first offers a preview to each album while the second mimics the current dropdown design. I chose to go with the second option as it was more in tune with VSCO’s current design and also less obtrusive to the rest of the gallery.

我想添加一個“相冊”或“文件夾”功能，以便用戶可以組織和縮小其工作室頁面。 VSCO當前提供了此功能的基本版本，它使用戶可以根據圖像是否已被編輯，發布或具有某種文件類型來過濾圖像。 但是，VSCO不允許用戶自己自定義這些類別。 我創建了兩個潛在的探索：第一個探索每個專輯，第二個模仿當前的下拉設計。 我選擇第二種選擇，因為它更符合VSCO的當前設計，并且對畫廊的其他部分也不太吸引人。

Low-fidelity iterations for studio gallery options工作室畫廊選項的低保真迭代

Instead of the previous “options” panel which was unnecessarily large and obtrusive, I wanted to include a more sleek way to access these tools. I came up with two variations—the first being a new task bar with all the tool options side-by-side and the second a set of pop-up options. The first design appeared a bit too busy and crowded, so I opted for the pop-up buttons which introduce interactivity without covering most of the screen. In addition, I changed the “download” icon since the original icon looked a bit like an export or publish icon.

與其之前的“選項”面板不必要的大而引人注目，倒不如我希望提供一種更為流暢的方式來訪問這些工具。 我提出了兩個變體–第一個是一個新的任務欄，所有工具選項并排放置，第二個是一組彈出選項。 第一個設計看起來有點太忙和擁擠，所以我選擇了彈出式按鈕，這些按鈕在不覆蓋整個屏幕的情況下引入了交互性。 另外，我更改了“下載”圖標，因為原始圖標看上去有點像導出或發布圖標。

初學者友好的編輯面板 (A beginner friendly editing panel)

Low-fidelity iterations of a more accessible editing panel易于訪問的編輯面板的低保真迭代

A raised “tab” appearance was created for the headers above filters in order to make them look like clickable buttons. In the current editing panel, favoriting a filter was done by holding down the filter until a star icon popped up—a feature several users did not know about. As a result, I wanted to include this feature in a more obvious spot. I opted for including a star icon next to the filter name (as seen in the third iteration) as users frequently use the scroll bar to apply filters and would be more likely to see star icon as opposed to holding down the filter. Icons were included at the top to allow for easy access to features such as the undo action, edit history, save button, and publish button. In addition, users can now edit multiple pictures at once by swiping left or right. These changes soften the learning curve for new users as well as make frequently used features more accessible.

為過濾器上方的標題創建了凸起的“標簽”外觀，以使它們看起來像可單擊的按鈕。 在當前的編輯面板中，通過按住過濾器直到彈出一個星形圖標來完成對過濾器的偏愛，這是幾個用戶都不知道的功能。 因此，我想將此功能包括在更明顯的位置。 我選擇在過濾器名稱旁邊添加一個星形圖標(如第三次迭代所示)，因為用戶經常使用滾動條來應用過濾器，并且與按住該過濾器相比，更有可能看到星形圖標。 頂部包括圖標，可輕松訪問撤消操作，編輯歷史記錄，保存按鈕和發布按鈕等功能。 此外，用戶現在可以向左或向右滑動一次編輯多張圖片。 這些變化使新用戶的學習曲線變軟，并使常用功能更易于訪問。

整理相機面板 (Decluttering the camera panel)

Low-fidelity camera panel explorations低保真相機面板探索

Finally, I played around with the camera panel. My first instinct was to simply reduce the size of the black task bar, but it still appeared too cluttered. In the second iteration, I made the advanced edits a pop-up feature rather than a permanent overlay on the screen. This gives users the choice to either use the edits or remove them for maximum screen size. I experimented with opacity as well, but ultimately chose to go with the second design as it was the most similar to VSCO’s current look, but still allowed for a less cluttered appearance.

最后，我在相機面板上玩耍。 我的第一個直覺是簡單地減小黑色任務欄的大小，但它看起來仍然很雜亂。 在第二次迭代中，我使高級編輯成為彈出功能，而不是在屏幕上永久覆蓋。 這使用戶可以選擇使用編輯或將其刪除以達到最大屏幕尺寸。 我也進行了不透明度的實驗，但最終選擇了第二種設計，因為它與VSCO的當前外觀最為相似，但外觀仍然比較整潔。

最終產品 (The Final Product)

After incorporating all the research and wireframing, I created a prototype in Sketch + InVision with the following new features. The final design maintains the simplicity and minimalism of VSCO while still making the app more accessible for all its users.

結合所有研究和線框圖后，我在Sketch + InVision中創建了具有以下新功能的原型。 最終設計保留了VSCO的簡單性和簡約性，同時仍使該應用程序可供其所有用戶使用。

新的彈出選項 (New pop-up options)

These interactions add a sense of playful animation to the application while reducing the obtrusiveness of the prior “options” overlay.

這些交互為應用程序增加了一種有趣的動畫效果，同時降低了先前“選項”覆蓋的吸引力。

資料夾功能 (Folder feature)

The ability to group photos and create folders allows users to organize their gallery. This provides a simple and intuitive functionality similar to that of the “Photos” app.

對照片進行分組和創建文件夾的功能使用戶可以組織自己的畫廊。 這提供了類似于“照片”應用程序的簡單直觀的功能。

簡化的攝像頭面板 (Simplified camera panel)

Allowing users to toggle between the advanced edits on the camera panel makes for a less cluttered interface.

允許用戶在相機面板上的高級編輯之間切換，從而使界面更簡潔。

輕松編輯 (Easy editing)

The ability to edit multiple photos, easily favorite filters, and undo changes makes frequently used editing features more accessible to users.

編輯多張照片，輕松收藏的濾鏡和撤消更改的功能使用戶更易于使用常用的編輯功能。

While VSCO is one of the most popularly used photo-editing apps, there are still several improvements that can be made. In terms of its features, VSCO provides a variety of editing options and filters. However, in terms of its usability, VSCO can definitely be better at making its unique features easily accessible.

盡管VSCO是最常用的照片編輯應用程序之一，但仍然可以進行一些改進。 就功能而言，VSCO提供了各種編輯選項和過濾器。 但是，就可用性而言，VSCO絕對可以更好地使其易于訪問的獨特功能。

From a design perspective, this case study required me to balance the current design and purpose of VSCO with the user’s needs and preferences. In the beginning, I found myself making changes to the app that I wanted, but needed to evaluate whether they a) fit with the theme of the app and b) would actually improve the user experience of VSCO. In more broad terms, I learned a great deal about the design process as a whole. This case study made me realize the importance of both user and market research in identifying areas for improvement within the application.

從設計的角度來看，此案例研究要求我在VSCO的當前設計和目的與用戶的需求和偏好之間取得平衡。 在開始的時候，我發現自己在更改應用程序， 我想，但評估他們一)是否符合與應用程序和b的主題)實際上會提高VSCO的用戶體驗的需要。 從廣義上講，我從整個設計過程中學到了很多東西。 這個案例研究使我意識到用戶和市場研究在確定應用程序中需要改進的地方時的重要性。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/vsco-redesign-a-more-intuitive-and-simplified-interface-9373a470f708

vsco

總結

以上是生活随笔為你收集整理的vsco_VSCO重新设计：更直观，更简化的界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。