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.

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

* 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.

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

Conducting basic user research and creating an affinity diagram進(jìn)行基本的用戶研究并創(chuàng)建相似性圖

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

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

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

它的組織能力很差： VSCO的簡約設(shè)計(jì)妨礙了用戶組織和分組照片的能力

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

該應(yīng)用程序不直觀：某些圖標(biāo)的用途不明顯，某些功能不易使用

仔細(xì)看看應(yīng)用程序 (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.

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

Markup of VSCO’s current layout and designVSCO當(dāng)前布局和設(shè)計(jì)的標(biāo)記

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工作室缺少任何組織選項(xiàng)，并且對于隨時間推移將幾張照片導(dǎo)入其圖庫的用戶而言似乎顯得不知所措。 結(jié)果，很難找到照片，導(dǎo)致用戶不斷滾動直到碰到正確的照片為止。 “選項(xiàng)”疊加層不必要地占據(jù)了屏幕的一半，并使下面的照片變暗。

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.

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

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.

攝像機(jī)面板偏離了VSCO的簡約設(shè)計(jì)，因?yàn)楦呒壒δ艿寞B加減少了可用于捕獲圖像的空間量。 這種混亂的外觀可能與為什么大多數(shù)用戶選擇將照片簡單地導(dǎo)入應(yīng)用程序而不是使用內(nèi)置相機(jī)的原因有關(guān)。

初始設(shè)計(jì)過程 (The Initial Design Process)

設(shè)計(jì)一個有組織的工作區(qū) (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當(dāng)前提供了此功能的基本版本，它使用戶可以根據(jù)圖像是否已被編輯，發(fā)布或具有某種文件類型來過濾圖像。 但是，VSCO不允許用戶自己自定義這些類別。 我創(chuàng)建了兩個潛在的探索：第一個探索每個專輯，第二個模仿當(dāng)前的下拉設(shè)計(jì)。 我選擇第二種選擇，因?yàn)樗蟅SCO的當(dāng)前設(shè)計(jì)，并且對畫廊的其他部分也不太吸引人。

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

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.

與其之前的“選項(xiàng)”面板不必要的大而引人注目，倒不如我希望提供一種更為流暢的方式來訪問這些工具。 我提出了兩個變體–第一個是一個新的任務(wù)欄，所有工具選項(xiàng)并排放置，第二個是一組彈出選項(xiàng)。 第一個設(shè)計(jì)看起來有點(diǎn)太忙和擁擠，所以我選擇了彈出式按鈕，這些按鈕在不覆蓋整個屏幕的情況下引入了交互性。 另外，我更改了“下載”圖標(biāo)，因?yàn)樵紙D標(biāo)看上去有點(diǎn)像導(dǎo)出或發(fā)布圖標(biāo)。

初學(xué)者友好的編輯面板 (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.

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

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

Low-fidelity camera panel explorations低保真相機(jī)面板探索

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.

最后，我在相機(jī)面板上玩耍。 我的第一個直覺是簡單地減小黑色任務(wù)欄的大小，但它看起來仍然很雜亂。 在第二次迭代中，我使高級編輯成為彈出功能，而不是在屏幕上永久覆蓋。 這使用戶可以選擇使用編輯或?qū)⑵鋭h除以達(dá)到最大屏幕尺寸。 我也進(jìn)行了不透明度的實(shí)驗(yàn)，但最終選擇了第二種設(shè)計(jì)，因?yàn)樗cVSCO的當(dāng)前外觀最為相似，但外觀仍然比較整潔。

最終產(chǎn)品 (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.

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

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

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

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

資料夾功能 (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.

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

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

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

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

輕松編輯 (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是最常用的照片編輯應(yīng)用程序之一，但仍然可以進(jìn)行一些改進(jìn)。 就功能而言，VSCO提供了各種編輯選項(xiàng)和過濾器。 但是，就可用性而言，VSCO絕對可以更好地使其易于訪問的獨(dú)特功能。

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.

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

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)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

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

vsco

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。