一個個實際的、活生生的案例來說明 & 展現 —— 設計細節拆分,還原真實的產品設計、開發等場景。
這一系列文章,好的設計,如何一步一步來的,從開始的 “呃~” 到最后的 “哇~”,相信作為教學例子,也實不為過。
用 PC 端軟件為例子,因為這是我最近做的,記憶尤新,各種小細節、各種選擇原因都還歷歷在目,講述起來更通俗易懂,并且 UX Design 的本質是一樣的,設計流程也大同小異,無論在電腦端、移動端、還是別的設備上。
下圖為終稿版(當然現在的管家產品已經又迭代了很多很多版,但左側三環主體的設計依然沒變,并且它拿到了設計專利):
a) 第一版提稿,感覺太簡單,頁面布局太像當時的騰訊電腦管家,沒內容沒創新,要求重新再想想:
b) 第二版設計稿,非常有想法,界面也清爽明朗。但是導航從底部改到左邊恐怕對技術開發的難度不是一般的大,因為他們要改技術架構,工作量和風險評估不通過。內容區域的左側兩個圖表,恐怕技術和數據都是個難點,非常有可能出現兩條直線水平線的圖表,實在 “不好看”。于是放棄。
c) 第三版設計稿,干凈清爽,只是稍嫌散亂,沒有特色。也暫時沒有特別好的想法,于是只要求在這稿基礎上改進一些,以便開始2.0新的視覺設計,任務艱巨繁重!
d) 第四稿,好似沒有特色,但似乎也挑不出毛病,交互設計暫定為它。
a) 第一版初稿,背影底圖不是藍得奇怪耀眼,就是 copy 百度電腦管家或騰訊電腦管家的….. 但左側圓環的設計很棒,比較特別,保留。
b) 第二版設計提稿,確定左側圓環的設計,“開始體檢” 按鈕的位置不夠聚焦,并且右側顯得到處都是按鈕,很奇怪。建議入到圓環下方,讓其非常突出,吸引用戶點擊。
c) 第三版設計稿,背景底圖重新設計,右側文字按鈕的布局嘗試小變化。
會議討論方案,鑒于時間緊等因素,老大暫定就下面左圖方案,細節再微調。
結束會議,我自己想了很久,還是決定跟所有人說出想法:這個設計方案我個人不同意,原因是與騰訊電腦管家(當時)的首頁太像了,頁面布局基本一樣,只是換了大小圖標文字描述而已……
幸而,得到了同事的支持和peopeo設計師們的理解,再次大家努力做出新的設計,讓聯想電腦管家有完全不同于市場已有產品的設計,有它自己的品牌感覺。
都非常、非常棒!peopeo 的設計師們特別棒!化壓力為動力!
下面各圖,左側為初提稿,右側為 review 改進稿:
方案1,2,蜂巢設計,展示數據一流,且有很多可擴展空間。review 改進主要移動 “體檢” 按鈕,讓整體不散亂,又有更多留白,更簡潔。
方案3,三環主體初現,界面干凈,功能區分清晰,重點突出。review 改進將左大側定為視覺主區,右小側為副功能,右小下為廣告區,且各設計統一性強。因為人的視線通常從屏幕/界面的左上角開始,右下角其實是視線的 “小盲區”,那么重點突出的部分應該在左側區域。
繼續調整細節。這個過程非常冗長,甚至直到產品上線前夕都還在微調。比如:
呈現出接近完美的設計,有中國山水畫的意境,安寧祥和,界面簡潔獨特,重點突出,與市場上已經類似產品完全不一樣的首頁設計,正是我們想要的:
后記:當然這個界面也是有缺點的,后續文章會具體討論。
寫這樣的文章,一是想還原真實產品的設計,與開發的合作,現在重憶,也是一份美好;二是想表達,一個好設計不是隨便一做就有的,有無數版的改進,花費無數時間與精力,結合了團隊大家的智慧,請看到文章的人們尊重設計師,及他們的勞動成果,“隨便幫忙設計一個界面,設計一個 logo” 這樣的請求還須慎重。
謝謝大家!
作者:Juner UX,微信公眾號:君樂UX,個人設計網站:www.junerdesign.cn
本文由 @Juner UX 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協議
計師電腦評測項目已經接近尾聲,我們在這段時間里對數款不同平臺、不同品牌的電腦進行專門的設計類應用項目測試,從中可以了解到新平臺與老平臺在設計類應用效率上的差異,同時也為設計師朋友們解決了選擇困難的問題。
聯想YOGA 700筆記本電腦
本次我們選用的測試平臺是聯想YOGA 700-14ISK,這款產品配置了英特爾酷睿i7 6500U處理器、搭載8GB內存、固態硬盤以及NVIDIA GeForce 940M獨立顯卡。
聯想YOGA系列筆記本電腦采用了翻轉屏設計,支持四種不同的使用模式,對于設計師而言,YOGA不僅有很好的工作效率保障,同時由于特殊、靈活的屏幕設計,也能夠在分享方案時更加自由,不用讓其他人都圍在電腦屏幕前才能看清內容,只需要把屏幕翻轉到相應位置即可,可以說是很好的設計師電腦。
·大型PSB文件處理測試
那么這款產品對于2D平面設計能夠提供怎樣的性能支持呢?下面我們來看看測試情況:
文檔打開速度測試
我們的測試項目依然分為兩個部分,第一部分為平面設計中的大型文檔處理,我們選用了1.75GB大小的PSB文檔,分別對其進行打開速度、尺寸變化保存速度、以及墨水輪廓、馬賽克、水彩效果三種濾鏡渲染速度大的測試,下面先來看看各項測試結果:
變化尺寸并保存速度測試
對于平面設計中的文檔打開或保存一類的操作,影響因素除了處理器之外,更為重要的還有硬盤。目前大部分新電腦都標配了固態硬盤,在讀寫性能上比老電腦所配的機械硬盤要明顯強跟多,因此在涉及到大容量文件打開或存儲時,也有著更為明顯的性能優勢,從上面的測試其實也可以看出這一點,搭載固態硬盤的三星筆記本比老平臺電腦有著更為明顯打開、存檔速度優勢。
墨水輪廓濾鏡渲染速度測試
馬賽克濾鏡渲染速度測試
水彩效果濾鏡渲染速度測試
通過柱狀圖我們可以很清楚的看到,英特爾第六代低電壓酷睿i7 6500U處理器在性能表現上還是很不錯的,相對于第五代酷睿i5低電壓處理器,以及四年前的酷睿i7標準電壓處理器而言,有著很明顯的優勢,執行效率相比去年銷售的主流筆記本高出至少3.8倍,某些項目最高甚至可達5.8倍,而與四年前的高端機型機型相比,聯想YOGA 700的最大提升幅度達到了5.8倍,因此對于時下的平面設計師而言,聯想YOGA 700這樣的低電壓平臺筆記本產品執行設計任務是毫無壓力的,同時還能夠有不錯的便攜性和易用性。
·照片文件處理測試
第二個部分的測試是照片文件的相關處理。其實平面設計所涵蓋的范圍還是比較大的,照片素材的處理也應該是其中一環,而照片處理相對來說對于電腦性能的要求還是比較高的,普通電腦或者老電腦在處理大容量、大批量照片時,總會有卡頓現象,而聯想YOGA 700的表現怎樣呢?
本次測試我們選用了三種不同規格的照片,包括:大尺寸圖片為Phase One IQ280拍攝的7760×10328照片(66.8MB);中尺寸圖片為Canon EOS 5D Mark III拍攝的5760×3840照片(12.9MB);小尺寸圖片為Canon EOS 30D拍攝的3504×2336照片(3.13MB),下面來看看測試情況:
RAW格式轉換速度測試
人像處理速度測試
烙黃底片效果速度測試
插畫效果速度測試
宣紙畫效果速度測試
通過五項不同測試內容可以看到,搭載第六代酷睿i7 6500U處理器的聯想YOGA 700依然是表現最好的平臺,不論是與主流機型還是4年前高端機型相比,平均而言,每個操作能夠減少0.1到0.2秒甚至更長時間的等待,在實際體驗中,操作“卡頓”感出現的頻率會明顯減少。
·評測總結:
從實際測試可以看出,第六代英特爾酷睿i7低電壓平臺得益于架構的升級,在平面設計性能體驗方面都要比四年前老平臺體驗更好,能夠有效的保障設計師的辦公效率,節約大量的時間,這是金錢所無法衡量的。
其實對于平面設計來說,處理器性能相當非常重要,這也是為什么四年前的標準電壓平臺比現在差的主要原因,新平臺在架構、計算性能上的先進性,使其在最終的計算能力上收益頗大,即便面對老的標壓處理器,如今的低電壓處理也能夠在運算性能上擁有更大的優勢,因此對于設計師而言,買新不買舊是購機時應該遵循的法則。
/范圣璽 設計的本質在于創造。雖然電腦在設計領域廣泛應用,豐富了設計的表現手段,為設計創意活動提供了有力的支持,但是歸根結底它只是思維結果外化的一種手段和工具,代替不了人類設計思維本身。設計思維的過程是將設計要求表現為視覺空間形象的過程。
我們可以將創造性設計思維歸納為以下要點:
類推是人類思維的基礎,我們人類借助于類推超越知識領域的固有性,從而不斷獲取新的知識。與之類似的思維活動還有推論、比喻等。
類推又可分為屬性類推和關系類推,前者基于形狀、色彩、重量、大小這樣的特定值,如將某物比喻為另一物,在設計上主要表現為形態關系的類似,而后者是基于某種關系聯接起來的,多體現為功能性關系。在擴散性設計思維的過程中,類推是提高設計獨創性的重要的思維活動和手段,藝術設計創意中的很多奇思妙想就是借助這種想象和聯想的能力來實現的。
兒童的天真的想法,常常令我們成年人拍案叫絕,感到妙不可言,甚至自嘆弗如,其原因就在于孩子的既有概念和知識結構單純,又較少受到現實因素的干擾和影響,往往會出人意料地把不相干的事物聯系在一起。就設計而言,很多跨越式的遠隔聯想,實際上可以通過屬性和關系的列舉這樣的中間環節,以類推的方式得到實現。
在設計要求和答案之間往往存在著某種習慣性的脈絡,這種既成文脈產生的設計往往帶有很強的特定性。改變既成文脈是導人不同范疇的要素的有效方法,并通過文脈的轉移或變更改變思維定勢,進而實現擴散性設計思維。文脈的變更是一種推理的轉移,是將存在于某種文脈的關系或者關系的集合向其他文脈的轉移。
情景分析法是設計創意過程中常用的手法,場景和情節的設定可以為設計行為者提供一條思考的線索,幫助其發現問題的切入點,進而實現理想的設計定位。不過通常這種場景和情節的設定是根據我們的生活經驗來做成的,也就是說,它是一種既定的生活脈絡的記述。然而要想更有創造性地發現和解決問題,文脈的變更可以幫助我們找到一種更有效的方法。
即通過對既有概念的否定,以期擺脫思維慣性的影響,改變思路,得到新的問題切入點和更寬泛的思維空間的方法。否定思維的好處在于它可以跳躍式地在不同的甚至對立的范疇間建立起關系,擴張的距離相對更遠,也更容易產生個性化的創意。
一般來說,設計創意過程中的否定多為部分的否定,它可以是對材料的否定、形態的否定,使用者、使用目的、使用環境的否定,也可以是對使用方式、操作方法的否定……假如對“按動開關來開閉燈具的電源”這一操作加以否定的話,可以產生“不按動開關來開閉燈具電源”的新思路,比如聲控、觸摸、光感等方式,也可以想到吹滅電燈這樣的獨特創意。
即通過逆向思維的方法,改變思維的定向。主要包括:形態結構的逆轉,功能的逆轉,狀態的逆轉、因果關系的逆轉等,通過對原有的形態、狀態、功能的逆向思維,賦予其新的價值。
將形態遵循功能這樣的關系逆轉的話,我們可以從非特定的形態出發去探索其功能的可能性,進而從形態中發現新的功能。具體說就是把各種單純的形狀物作為部件,通過它們,的重新組合,從中發現新的創造物。
一些幾何要素單獨看起來并沒有什么具體的實在性意義,然而將若干要素加以組合,卻可以從中聯想出某種具體的實用價值。這種形態先行的發明模式顯示了形態與功能的新的關系,揭示了創造性思維過程中形象思維的重要作用。
在探討設計創意的時候,最常聽到的是“靈感”一詞,很多設計師在談到創作動因時也喜歡用來自某個靈感的說法。靈感似乎總是在偶然、無意識和不經意間發生,“靈感”一詞既是一種解釋,卻又難以把握。
如何獲得靈感?在這里我們提出一種稱之為思考暫停,或者說積極忘卻的方法,借以脫離思維的定勢和已有思緒的糾葛,將“偶發”轉化為一種有意圖的行為。這里所說的暫停和忘卻并不意味著讓思 維重新開始的“清零”操作,我們可以把前期的思考理解為一個未完成的、模糊的混沌體。
一個沒有明確界線的、開放的、包含諸多范疇的體系。暫停和忘卻只是使其處于一種假眠狀態,進而通過閱覽、體驗等等其他一切活動中的偶發事物喚起我們的潛意識,或將其中的某個要素激活,使其復蘇或從意想不到的層面上展開。
設計中的抽象化過程,主要包含有概念的抽象化和形態的抽象化。具象的概念往往很容易聯想到具體的對象物以及它們的形態,而概念的抽象化可以變可視化的系統為不可視的系統,借以擺脫具象的影響。概念的抽象化和形態的抽象化是一個相互影響的過程,概念的抽象化、基于抽象的概念來進行形態的探索,探索到的具體形象的抽象化、判斷和修正、定案或者抽象概念的切換……這種交互作用的程度決定著設計思維的深度。
任何創造性思維的方法與結果間都不存在簡單的對應關系,設計思維的過程沒有終結點,也不存在最佳方案。不過有意識地利用相關的思維方法來展開設計,并通過訓練使之成為一種思維的習慣,有益于提高創造性思維的能力,提高創造性活動的效率。
① 官方頭條號:設計智造 頂級創意設計師必備
② 本篇為 設計智造www.cocoo.top 編輯整理,版權歸原作者所有,轉載請注明出處!