qzone相簿相片編輯器設計案例:減少使用者思考的簡潔設計

來源:互聯網
上載者:User

網頁製作Webjx文章簡介:設計案例:簡化使用者介面,別讓使用者思考.

·介紹
QQ空間相簿的個人化利器,能對照片進行效果的最佳化、文字編輯等等。

從設計上使用了創新的手法,盡量減少使用者的思考。其中,通過介面的特殊表現,讓使用者更容易學會使用。在使用的過程中,也避免了複雜的操作方式,降低使用門檻。

·定位

瞭解使用者需求
·使用者期望相片編輯工具擁有“玩”照片的成分;
·大多數使用者反映,最需要的功能是旋轉、裁剪、添加照片的邊框;
·能給照片添加文字、裝飾品;
·對照片進行顏色或其他效果最佳化。

分析使用者需求

除了可以對照片進行簡單的角度旋轉,尺寸裁剪、調整;同時可以給照片添加邊框、文字、裝飾品;還能夠進一步對照片處理亮度、模糊等等…眾多功能已經足以讓相片編輯工具顯得複雜,並且帶來的是較高的使用學習成本。

作為相簿的相片編輯工具需要易學、易用。甚至只需要一些簡單的最佳化步驟已經足夠滿足需求。即使是熟練使用Photoshop最佳化照片的使用者,選擇相片編輯工具也只是想方便、快速實現一些簡單的個人化效果。

·設計
對相片編輯工具的要求,從基礎的最佳化照片,到照片的特效處理,並儘可能多的個人化照片功能。但前提下需要讓使用者可以很容易找到基礎的最佳化功能,介面需要直觀且容易使用。當然,不是一個擺滿所有功能的編輯器,並附帶一份使用教程。

介面布局能讓使用者理解
介面設計傳達給使用者的親身感受是最直接的。介面的功能太多、複雜,則會讓使用者在使用相片編輯工具時有很高的學習門檻。從介面布局入手,設計介面的布局結構。

簡化並設計布局結構
設計相片編輯工具的介面,嘗試將所有功能分布在三個不同的地區:
1.對照片的簡單效果最佳化
2.可添加到照片上的個人化裝飾
3.相片預覽版區

把所有的功能呈現在介面上,讓使用者逐步嘗試每一個功能對照片的變動,然後再找到他所需要的功能;或者說在眾多的功能下找到需要的某一個功能,也不是一件易事。若對於僅僅只是想把方向顛倒的照片旋轉矯正、裁剪尺寸,會把一些多餘的功能佔據了相片預覽版區。

如何合理得地歸類功能,調整一個合適的布局結構,讓介面理解起來更加簡單,卻不會讓更多個人化的功能淹沒?

編輯照片,所見即所得 (WYSIWYG)、核心的內容則是相片預覽版區,其次是提供一個固定的編輯照片功能區:把所有功能集中在固定的地區,可以更容易找到。

功能區
依據大部分使用者樸素的需求,把最常用的功能放置在最容易發現的位置。當需要更個人化照片的時候,同樣可以很方便找到入口。

可擴充的功能區—添加裝飾
考慮到“添加裝飾”功能會有很多裝飾品,需要一個固定並且明顯的位置。相片編輯工具的核心是讓使用者可以在簡單最佳化照片之餘,還可以“玩”照片。所以這個地區的設計是讓使用者在需要的時候開啟使用,通過技術上的特殊處理,同時也能讓使用者自行控制,切換為固定的可添加裝飾的地區。

一個有序的學習過程
這樣的介面設計讓使用者在第一次使用相片編輯工具時降低了門檻。介面布局的簡化能讓使用者更容易理解,對照片的編輯、最佳化、等更多的操作,都能在固定的一個位置,更容易找得到。整個使用過程都是可預知的。

避免複雜操作
眾多的功能,如何讓使用者每一個都能學會使用,也是一個棘手的問題。

例如:常見對照片的最佳化,都會使用複雜的“模式化對話方塊”(比如:調整亮度)。

模式化對話方塊“好處”
雙重保險,調整到合適的效果後,再確定;不滿意,取消。可避免大部分的誤操作。

“壞處”
需要完成當前操作,當前的操作若不“確定”或“取消”,則無法進行其他動作,對話方塊被模式化,擋住了背後的其他動作。
操作越多步驟越多,每個操作都需要確定一次,顯然不是每一個操作都需要,甚至會造成使用者的困擾。

對於相片編輯工具,我們需要的是更簡單,並且便捷的操作過程。盡量避免模式化對話方塊,成為設計上的禁忌;當然,並非一味想辦法把模式化對話方塊都“cancel”。

在對功能進行歸類的同時,把複雜並且容易出錯的操作,是更需要“雙重保險”的:比如照片裁剪功能。裁剪功能往往不是一步到位的操作,需要多次調整圖片的裁剪地區並確認裁剪範圍後,才會儲存。若有不滿意的情況,需要讓使用者從頭再來或放棄。

“撤銷”操作緩解了誤操作
撤銷上一步的操作,對發生誤操作或操作後不滿意的情況下,比起每次操作都需要“確定”,使用過程會更加方便。

比如銳利化、對比、亮度,這些操作都是顯而易見,也是比較容易讓人可以猜到的。而正當需要使用這些操作的大多數情況都是很直接的。如果對調整的效果不滿意,將滑動塊移回初始狀態即可;由於設計上使用了下拉式功能表這類型的輕量操作,在發生了誤操作,撤銷上一步的操作可以回到原先的效果。

比如:點擊模糊功能>展開調整菜單>調整完成後>不小心點擊了菜單外其他地區或轉到其他功能時>菜單收合,照片效果變了。

那麼此時可通過撤銷操作來恢複調整前的效果:

·最後
我們將會在體驗這一塊不斷去思考、嘗試,進一步提高易用性。至少,我們的思考能減少使用者的思考,會是讓產品更有利健康地成長。

體驗一把:qzone相簿中點擊相片編輯器或查看照片時點擊編輯開啟相片編輯器。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。