首頁

讓你的軟件產(chǎn)品UI更出色,蘭亭妙微助你實現(xiàn)

前端達人

在當今數(shù)字化世界中,用戶體驗和視覺設計已經(jīng)成為商業(yè)成功的關鍵因素。在這樣一個競爭激烈的市場環(huán)境中,擁有出色的UI設計策略已經(jīng)成為企業(yè)必不可少的競爭優(yōu)勢之一。因此,選擇一家專業(yè)的UI設計公司是至關重要的。

作為一家具有多年經(jīng)驗和卓越實力的UI設計公司,藍藍設計已經(jīng)成為了業(yè)界的佼佼者。他們的團隊由一群充滿激情、有豐富經(jīng)驗的專業(yè)人士組成,涵蓋了用戶研究、交互設計、視覺設計等方面,為客戶打造出色的用戶體驗和高質量的產(chǎn)品。

首先,藍藍設計注重用戶研究。這是UI設計過程中最關鍵的階段之一,需要深入了解用戶的需求和習慣,才能夠開發(fā)出適合目標用戶的設計方案。藍藍設計的團隊將用戶體驗放在首位,通過深入了解用戶的行為和思維模式,為客戶量身定制最適合的設計方案。

其次,藍藍設計在交互設計方面也非常擅長。交互設計是UI設計過程中最重要的一環(huán),它決定了用戶與產(chǎn)品之間的互動效果。藍藍設計團隊注重產(chǎn)品的易用性和可訪問性,通過精細的交互設計,為用戶提供方便快捷的操作體驗。

此外,藍藍設計在視覺設計方面也頗具實力。他們深諳色彩、布局和排版等方面的規(guī)則,能夠創(chuàng)造出獨特的視覺效果,并將品牌理念巧妙地融入其中。無論是App設計、網(wǎng)頁設計還是平面設計,他們都能夠將客戶的要求和市場趨勢完美結合,呈現(xiàn)出高質量的視覺效果。

總之,選擇一家專業(yè)的UI設計公司是企業(yè)成功的必要條件之一。藍藍設計憑借多年的經(jīng)驗和卓越實力,為廣大客戶提供優(yōu)質、創(chuàng)新的UI設計服務。如果你正在尋找一家能夠幫助你提升產(chǎn)品競爭力的UI設計公司,那么推薦選擇藍藍設計。他們將為你提供最佳的設計方案,使你的產(chǎn)品在市場中脫穎而出。





優(yōu)秀的UI設計不僅僅是美觀和易用,更需要考慮用戶體驗、品牌形象以及市場競爭力。如果你正在尋找一家專業(yè)的UI設計公司,那么強烈推薦藍藍設計公司。作為一家擁有多年經(jīng)驗的UI設計公司,藍藍設計在用戶研究、交互設計、視覺設計等方面都具備深厚的實力。他們的團隊不斷探索新的設計趨勢和技術手段,以確保為客戶提供最佳的設計方案。無論是App設計、網(wǎng)頁設計還是平面設計,藍藍設計都能夠滿足客戶的需求。與藍藍設計合作,你可以獲得創(chuàng)新性、高質量和可持續(xù)性的UI設計服務,讓你的品牌在市場中脫穎而出。



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。 



藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

給設計公司的UI設計需求文檔怎么寫?請看一下這段錄的視頻講解吧!

藍藍設計的小編

偶爾有來咨詢的客戶會詢問:設計需求文檔怎么寫?給我一個模板吧。

加起來,這樣問的客戶也不少,所以藍藍設計錄了一個視頻講解:給設計公司的UI設計需求文檔怎么寫?請看一下這段錄的視頻講解吧!

說說抖音和小紅書的交互和界面設計,您更喜歡哪一個?

藍藍設計的小編

 HI,親愛的寶寶們(小紅書上常用的呢稱),大家好,小紅書和抖音是最近非?;鸨膬蓚€視頻類的APP,可以說是視頻APP中的代表了,不知道你喜歡哪一個?

這兩個APP都非常的優(yōu)秀,所以今天藍藍就把這兩個APP的主界面都截了一下圖,我們從界面和交互以及用戶的角度去分析一下他們之間的區(qū)別,猜一猜他為什么要這樣做?

精進自己、正面思考、調整情緒的三個小方法

藍藍設計的小編

 西藏有一個六時書修行方法,確定要改進的一兩個弱點(比如懶惰,拖延),每天分六個時辰反省自己(間隔兩三個小時的樣子),在每個時間段有好的,不好的念頭或者行為都記下來反省總結,以便在下一個時間去調整)和鼓勵自己。這個弱點改的差不多了,就繼續(xù)下一個弱點作為目標去改正。讀富蘭克林的自傳,他基本上也是用這種方法,但沒有分每天六次這么細。

藍藍設計隨筆:ui用戶界面中的表格設計

前端達人

藍藍設計隨筆:ui用戶界面中的表格設計

藍藍設計 2020-06-10


作者:藍藍


表格,是一種最常見的信息組織整理手段,常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設計中最常用、最基本的是表格的設計,有些軟件中80%都是表格類頁面,可以說,設計開發(fā)的是否易用,很影響口碑和用戶的使用感受。基礎的東西一定要做好,就像我們吃的主食一樣,雖然都是米和面,但是各地出產(chǎn)各種品種口味都不相同,要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。


一、基礎的表格設計美化

      基礎的表格可變化的地方很少,可以根據(jù)當前軟件開發(fā)選擇的框架控件(ext/vue/jequery不同框架會有一些不一樣)做色彩和風格的變化,如:加表格不同粗細的線、斑馬格,中間無豎線種種的設計,有的表格需要標題很突出,有的內文突出,這就和內容焦點相關了。

1.png


        為了操作直觀便捷,在操作區(qū)放一些圖標“刪除、編輯、審核”,配合文字來使用,有的把操作類的圖標放在最左邊,有的放在最右側,按行業(yè)用戶習慣而定。

2.png

        可以用固定表頭(標題位置不變),允許用戶排序,單元格內有很長的文字,設定最大字節(jié),多內容用……替代避免轉行,有小數(shù)點的數(shù)字右對齊,每列的大小可調整,這些也是設計開發(fā)中可以做好的細節(jié)部分。


二、特別寬的表格怎么設計?


        有的表格的寬度,達到了屏幕的兩屏和三屏,出現(xiàn)寬寬的橫向滾動條,又有長長的豎向滾動條,但工作的人又必須看,可煩人了!很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題:

方法一

        如果表格的標題是可以定制的,允許省略的,可以從業(yè)務角度取舍去掉無關緊要的,不常用的內容,把這部分放在點開的詳細頁內容中即可。這就像一個房間的斷舍離:挑選、丟棄、分類、收納,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可無的?依次排序放在順手的位置,ui設計的道理也是相通的。

方法二

        如果表格里面的內容是確定的,不可省略的,比如銀行的報表就是這么長,這么多,那我們就可以從設計的角度來優(yōu)化,做一個加高版的表格。

3.png


        表格為什么一組信息只能一行呢?完全可以一組三行四行,在組中進行重點信息,非重點信息以及符號化的直觀轉變。用大小、對比、濃淡、色彩、間隔這些平面設計的基本原則,讓一個普通的“山里娃”土土的表格變成一個“青春靚麗、人見人愛”自帶明星氣質的表格。

方法三

        大表格里面嵌套小表格,利用交互設計,巧安排空間。當用戶光標移至感興趣的那行的時候,關于它更多的內容,在下方滑動撐開出現(xiàn)或者右邊浮動出現(xiàn)。這個方式雖然比較土,但也確實管用。早年在看某一招聘網(wǎng)站的時候,每一個人的簡歷只要點名字就可以看到一組關鍵信息,便于迅速篩選,而另外一個招聘網(wǎng)站,就沒有這個功能,每個人都要打開之后才能看見整體信息,我后來就不怎么看那個網(wǎng)站了。多一步操作,對典型用戶就多了許多的工作量,網(wǎng)站和軟件的使用口碑,用戶粘度就是這樣在為用戶考慮中一點一點積累起來的。

4.png


上圖:大表格里面嵌套小表格


        方法不會只有這三種,其他的方法要根據(jù)當時的業(yè)務,用戶使用的習慣、重點,因地制宜的去設計了。軟件中的表格節(jié)省了許多程序工程師的工作量,如果做大的改動或許是巨大的工作量,如果要做變動,一定要在開始的時候就要讓ui設計納入開發(fā)體系,一生二,二生三,在前期第一批實施時越注重細節(jié),后期就會越輕松,甚至省去幾倍甚至幾十倍的時間挨個頁面的去糾偏、修改。

         一個系統(tǒng)總是需要業(yè)務擔當,顏值擔當?shù)暮诵牟糠郑匾捻撁嬉~外的對待、花更多的精力和時間。如果千篇一律,也就不能顯示出軟件產(chǎn)品的獨到之處了。

 

第三 與表格配合的部分設計


第一種  “搜索查詢”和“過濾”部分的設計

        大多數(shù)表格的前面都有搜索過濾功能,如果搜索條件相當多,可以精選一部分主要的排成一行,其他的隱藏,點箭頭再出現(xiàn)。整個搜索區(qū)域也可以有隱藏/顯示的按鈕,來給下面的表格更多的空間。

        過濾條件區(qū)域可以定義好“條件名稱”一致寬度,一般在八個字左右,避免有的字節(jié)多,有的字節(jié)少,行數(shù)多了,參差不齊,區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距,這樣整體頁面就顯得整齊劃一、條理清晰。


5.png


上圖:搜索和卡片式信息的組合

第二種  表格操作部分的設計

       對表格的操作“導入,導出、批量導出”有的時候這類操作有1020個,有的時候才幾個,多的時候很占地方,可以用隱藏的方法,over到表格上再出現(xiàn),以節(jié)省空間。

       也可以分組把同類的操作聚合在一起,把常用的放在目之所及,不常用的點后下浮出現(xiàn),以節(jié)省空間,

還可以光標跟隨表格的某一行,點選自動浮出一群小跟班,各種操作按鈕。即節(jié)省空間,操作移動路徑又很短。只是不支持批量操作。

 

第三種  表格和卡片式設計、統(tǒng)計圖的整合切換

        表格是可以轉換成卡片式設計的,用一個卡片代替一行的展現(xiàn)信息,改變一種閱讀的方式。

有的也可以轉換圖統(tǒng)計圖表:曲線圖,柱狀圖讓用戶直觀的去解讀,而不必一直看枯燥的數(shù)字。

6.png



藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務







精致淡雅,“新”擬態(tài) -“新”開端

前端達人


原創(chuàng)藝仁 藍藍設計 2020-12-18



       藍藍設計一直關注著國際國內創(chuàng)新設計趨勢和理念。權威設計平臺Behance上最近發(fā)布了2021年設計趨勢,這次的設計趨勢包含了UI、平面、包裝等多個領域。

      其中,3D成為2021年的主要趨勢,我們在所有的設計類型中都可以找到它。2021年3D的新穎之處在于應用在了UI界面上,而在此之前,UI界面一直被平面設計所主導。即將發(fā)布的Mac新操作系統(tǒng)Apple Big Sur也讓3D在UI設計中得到更頻繁的使用。

1.jpg


2.jpg


3.jpg

      ios14的界面更新將影響所有的UI設計。ios14新推出的Widgets小工具分為大、中、小三種尺寸,用戶可以自由布置界面。因此設計師需要設計3種樣式的Widgets小工具圖標。

4.jpg

5.jpg

       線稿填色這種插畫風格的流行在2020年已經(jīng)初見端倪,在2021年也將繼續(xù)流行下去。

7.jpg

8.jpg

      近年來3D風靡設計界,有一些精致的插畫給我們留下了深刻的印象。簡約而配色鮮明的3D插畫將成為2021年插畫的流行風格之一

9.jpg

       時尚是個圈,70、80年代懷舊風漫畫將在2021年重回潮流。這種經(jīng)典風格的插畫特點是使用輪廓、簡單的形狀和一些細節(jié)填充。

10.jpg

       這種風格的插畫非常像凌亂的涂鴉,乍看未完成,但所有的細節(jié)都是經(jīng)過深思熟慮的。重疊的形狀和強烈的色彩讓這些插畫與眾不同,同時能有效激發(fā)靈感。


11.jpg


12.jpg

13.jpg

       VFX或視覺,是將現(xiàn)有的鏡頭與計算機生成的圖像相結合,創(chuàng)造出逼真的場景。隨著眾多方便友好的軟件出現(xiàn),VFX開始在視頻和短片中會變得更加普及。

14.jpg

       3D影響了所有的設計領域,我們甚至可以說,2021年,它主導了幾乎所有的數(shù)字設計。隨著虛擬現(xiàn)實在越來越多的App、網(wǎng)站或軟件中的應用,3D也將越來越重要。而設計師們可以將3D和攝影或2D結合起來,創(chuàng)造出一種不同的設計效果。

15.jpg

       動態(tài)logo已經(jīng)出現(xiàn)了好幾年了,但現(xiàn)在他們被更多的品牌使用,因此非常值得我們的注意。打開App之后,我們首先看到的就是logo,將logo與動效結合能給用戶留下深刻印象,從而更容易記住品牌。

16.jpg

       因為疫情隔離,很多公司開始投資AR技術。在未來,我們可以看到,在人工智能和機器學習的幫助下,增強現(xiàn)實技術將大規(guī)模應用于各個領域,無論是醫(yī)藥、藝術、商業(yè)、客戶服務還是導航。

17.jpg

18.jpg

       排版是設計中最重要的元素,有經(jīng)驗的設計師甚至可以只使用文字排版來設計視覺標識。排版對于建立信息、建立強大的視覺層級、傳遞信息以及為用戶創(chuàng)造良好的體驗都很重要。

      大字體和粗體從設計之初就已經(jīng)存在了,不管采用什么樣的設計手法,醒目的大字而且將永遠是設計中的一個熱門趨勢。

19.jpg

       從上世紀初開始,幾何形狀就已經(jīng)用于視覺藝術中,盡管這不是一種新的設計趨勢,但在2021年的平面設計中,無論是海報、印刷品、包裝還是品牌識別,都將聚焦于幾何形狀。

20.jpg 

       線條藝術充滿魅力,并可以在各種設計領域內應用。

21.jpg

22.jpg

       疫情讓人們對環(huán)境保護格外重視,因此包裝行業(yè)必須開始采取措施,減少對環(huán)境的影響,使用可生物降解的材料。

23.jpg

       經(jīng)過深思熟慮后設計的獨特插畫可以為你的品牌故事產(chǎn)生廣泛影響。因此你必須謹慎地選擇能夠傳達你的品牌故事的插畫。它們必須是有意義,并給品牌帶來一致性的。

24.jpg


25.jpg

       在銷售產(chǎn)品時,用優(yōu)質的包裝設計講述有關品牌的迷人故事,能有效激發(fā)出購買欲。包裝上的所有元素都應該為客戶帶來獨特的體驗。

26.jpg

       在人人都離不開手機的時代,包裝也可以和手機產(chǎn)生互動,比如使用AR等手段創(chuàng)造品牌知名度。


27.jpg


28.jpg

       權威色彩機構 Pantone 公布了2021年度雙流行色:灰+亮麗黃。

       這是繼2016年水晶粉+寧靜藍之后,第二次推出組合年度色,寓意光明,傳遞力量與希望。灰+亮麗黃這兩個獨立的色彩,聯(lián)手打造出夢寐以求的色彩組合,像是自然風化的巖石上浮起的日出,帶來了一種更深層的體貼和踏實感,同時也表現(xiàn)了對未來充滿希望的樂觀精神。

       這正是經(jīng)歷過艱難的2020年后,世界所需要的。
29.jpg

       當人們期望尋求能量來強化自己,克服持續(xù)的不確定感時,堅實可靠而又熱情洋溢的色調,恰好能夠滿足我們對生命力的追求。

       在過去幾年里,潘通的選擇充滿了社會意義,被看作是對全球情緒的捕捉。

       而在經(jīng)歷了記憶中最黯淡的一年之后,2021年的組合色旨在以堅韌的精神基底傳遞積極和幸福即將到來的訊息,給人們帶來希望,讓人感到一切都將變得更加光明。

30.jpg

       目前,已有相關設計產(chǎn)品使用了潘通2021流行色:

31.jpg

32.png

       本文藍藍設計著重介紹一個未來可以配合3D設計趨勢的全新設計風格-新擬態(tài)設計。

33.png

       光是人眼感知世界的媒介,溫和柔美的光影變化輔以精致優(yōu)雅的配色紋理展現(xiàn)出真實世界原本物體的豐富質感。光影的把控影響著事物的情感表達,光影的流轉變化傳遞出不同的情緒,同時也影響人對事物空間感的判斷。

34.png

       新擬態(tài)是一種圖形樣式,其原理是通過簡單富有層次的光影變化為界面的UI元素賦予真實感。新擬物算擬物風格的一種,只不過表現(xiàn)形式相對特立獨行,最早出現(xiàn)在國外網(wǎng)站dribbble上,之后陸續(xù)被收錄在2020設計趨勢預測中,在2019年的年末慢慢被大家熟知,討論,重視起來。

35.png

36.png

       在2020年2月11號舉行的三星視覺發(fā)布會使用新擬態(tài)的設計手法作為設計海報。帶有漸變的淺灰色背景,結合富有層次感的光影漸變,充滿未來感。相對克制的色彩選擇和多角度的光影變化,強調出產(chǎn)品豐富的質感和科技感,簡潔而神秘。

37.png

       這是一款多平臺記錄工具,有道云筆記的擬物化設計風格相對謹慎,主要的操作按鈕部分,均采用了“擬物化的”風格,但是在大面積的展示區(qū)域和非功能性按鈕依然沿用了簡潔的扁平化設計。在保證“新擬物”質感的同時,保證主體內容的可閱讀性,和整體頁面的清爽感。

38.png

39.png

      藍藍設計也在設計項目中結合目前流行趨勢進行探索設計,容器元素通過光影的變化,展現(xiàn)出不同的狀態(tài),通過模擬物理層面“高程”的不同,形成不同的組件狀態(tài),從而演變成承載各式功能的基本元素。

      清晰淡雅的容器元素和扁平活潑的表現(xiàn)層元素在色彩和材質上都形成了鮮明的對比,扁平的圖標配以高飽和度的色塊或者深色的圖片,讓界面元素的對比愈發(fā)強烈,容器層和表現(xiàn)層的層疊配合,千變萬化, 組成界面中的各種模塊,讓界面版式更為豐富,給人簡潔靈動之感。

40.png

      在扁平風大行其道的當下,公眾審美難免已經(jīng)疲勞,設計風格再次回歸擬物化,或許已經(jīng)是主流趨勢。未來,3D設計,輕立體設計將與扁平化的設計風格相結合,產(chǎn)生新的設計語言和領域。

      從輕擬物風格到Glassmorphism風格,擬物化設計的演變進程已然開啟,未來,無論是3D設計的加入還是扁平風格的延續(xù),“質感”都將成為設計過程中被著重強調的風格。



      藍藍設計,工作室2008年開始,2011年正式成立北京蘭亭妙微科技有限公司,主創(chuàng)清華團隊,專注軟件和互聯(lián)網(wǎng)ui設計開發(fā)。擅長企業(yè)信息化管理、監(jiān)控、大數(shù)據(jù)軟件UI、UE咨詢和設計開發(fā)服務。立足UI,一直在學習進步。
      藍藍設計,秉承設計優(yōu)秀,不斷超越的理念,誠信敬業(yè)、專業(yè)耐心的工作作風,進行設計服務創(chuàng)新,幫助企業(yè)進行軟件和互聯(lián)網(wǎng)產(chǎn)品的界面設計及開發(fā)升級,提供卓越的解決方案。對軟件界面用戶體驗與交互設計與實現(xiàn),國際化標準和流行趨勢,進行不斷的研究和實踐,擁有豐富的解決問題經(jīng)驗。


42.png


欣賞更多界面及其它作品請訪問
sillybuy.com




藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

UI經(jīng)驗:軟件首頁怎么設計?

前端達人

原創(chuàng) 藍藍 藍藍設計 1月1日


      藍藍設計是一家做UE/UI設計的公司,我們常常接到的項目是大屏、pc端、手機端的項目要重新做交互設計和視覺設計。每個軟件首頁怎么設計?如何進行首頁上的內容取舍,最終客戶和上司是究竟想要什么?是客戶們(產(chǎn)品經(jīng)理或技術總監(jiān))普遍感到為難的地方,希望有外部的專業(yè)設計力量來參與意見,多一份力量。

一般進行軟件首頁的設計,我們先思考:

  • 首頁要放什么內容?哪些是核心的,用戶最在意、最常用的。

  • 軟件產(chǎn)品提供什么樣的核心價值?

  • 用戶常用的功能是哪些?

  • 未來1到3年軟件會增加什么重要的功能?發(fā)展方向?

  • 需要借助軟件產(chǎn)品傳達哪些企業(yè)價值觀?

  • 在交互上和需求上先和軟件公司做一些交流,雙方達成一致再進行。

      我們也了解到,有許多軟件公司做這件事情(開發(fā)運營這個軟件或網(wǎng)站)已久,特別想找一個嶄新的方式去看待目前做的這件事。找個靠譜的外部設計公司和做用戶調研是兩個好方法。
      我們建議如果時間充許的話,可以做做用戶調研,做8到10個用戶不同角色的訪談,從真正的客戶的角度去思考一下不同角色對這個產(chǎn)品的期待和理解。(訪談的人不用太多,因為太耗時間,但是可以多輪,一段時期一段時期不斷的去了解用戶的想法),從一線了解許多不同層次的想法和使用者的意見。
      在和客戶的交流中,常常會遇到:改版會帶來多少程序方面的工作量這類的問題。這個擔心很多公司,特別是十年來在一直做著同一個產(chǎn)品的經(jīng)理們普遍反映都有,特別是很大型的軟件。
      其實,下決定最難。
      改版與否,其實取決于對空間秩序美的忍耐度及它能帶給你的價值。
      就像有的人房間很亂,也不收拾,特別能忍。他省了整理的時間,但他個人可以找到自己的東西,有自己的內在邏輯。但表現(xiàn)在工作上就是:界面很亂,除了開發(fā)者自己,客戶都找不到東西,很難使用,花了客戶很多時間去學習使用這個軟件,到了忍無可忍,客戶提出強烈不滿的時候,有可能危及到合作時,在吐槽中被迫進行。
      優(yōu)勢技術不等于優(yōu)勢產(chǎn)品,產(chǎn)品的需求和體驗要先于技術和模式而存在,品牌的戰(zhàn)略貫穿在企業(yè)的全鏈條中,以用戶可以感知的點滴來詮釋軟件產(chǎn)品核心價值,塑造品牌
      UI的設計能帶來的不僅僅是軟件的美化,UI咨詢公司能帶給客戶的是一種思考的方式和解決問題的行動力。軟件企業(yè)最好當然是掌握市場先機,企業(yè)內部里去觸發(fā)、驅動  ui咨詢類項目,在機會來了的時候才更從容。
      對不熟悉的事情,大家總是會有一定的壓力,表現(xiàn)的行為方式上就會有點拖延,選擇決策困難。我在想,有時候我們的界面設計時間總是被擠壓的特別少,在功能都實現(xiàn)的情況下才來進行,是不是也是出于客戶的這種心理呢?
      其實對于我們這樣一個做了界面設計十多年的設計公司而言,這些都是我們平常日常工作中的工作,沒有什么難點,只是要根據(jù)不同的公司,不同的產(chǎn)品去梳理清楚、理解業(yè)務,用心體會。
      做好整個系統(tǒng)的交互設計,首頁的內容布局設計,和進行一個家庭的空間物品歸納整理沒有什么區(qū)別。不要陷入“要么不做,做就做到最好的”極端思維,只要馬上迭代改進,平時保持一定的水準,總會做的越來越好。
家庭裝修和軟件界面設計的對比:
家庭要裝修
1. 首先要考慮到家庭的空間有多少人要去使用,住幾個人?空間之間的最佳行動路徑。未來幾年內人口會增加或減少嗎?住多久?
2.了解你和家人所需要的物品,對它們進行分類和預算了解,無用的物品斷舍離。
3. 物品的使用場景在臥室里用,還是在客廳里看電視的時候用?服裝的裝搭是出門見客還是家居服,有多少件?對客戶來講最看重的是書柜還是衣帽間設計,還是廚房呢?因人而異,選擇對他最重要的物品和場景,好好的設計,創(chuàng)造最讓人感動的體驗。
apjpk-4pjoz.jpg
交互設計有點像居室空間的規(guī)劃
        這和產(chǎn)品的軟件界面設計其實是相通的:
1. 了解就是這個系統(tǒng)有什么功能,準備放到幾個導航菜單中?導航之間的最佳切換路徑。產(chǎn)品核心提供什么樣的價值?未來1到3年軟件會增加或減少什么重要的功能?產(chǎn)品未來的發(fā)展方向?這版用多久,多久改版一次?
2. 把所有的功能進行分類和預算,分版本陸續(xù)實現(xiàn)。斷舍離軟件功能,進行取舍歸納。最常用的,重要的先做,花費精力太多,又很少用的功能舍掉或后做,
3. 了解每一個功能的使用場景,是什么用戶角色使用?是在戶外或者室內用?是日常工作時還是領導視查,開會時使用?他最關注什么?他的使用過程是什么?
      了解每一個功能的使用場景和用戶關聯(lián)時,可以畫出一個用戶體驗地圖幫助梳理思路。從使用這個軟件產(chǎn)品的開始到結束,不同接觸點,關鍵點列出來,選擇最需要改善的幾個重點,好好的設計開發(fā),創(chuàng)造最讓人感動的體驗。
apobm-0g27q.jpg
      有了要表達的界面元素,把它們按照人類的使用習慣去組合,進行這些頁面的內容的排列方式就可以了,比如:
  • 重要的內容放在第一屏重要的地方,按照人類的閱讀習慣,從左到右,從上到下。重點的字大區(qū)塊占比大,非重點的弱化小字,歸納為一組,可隱藏。
  • 用好對比,不要讓人思考,該提示的地方要提示(直接打開頁面時彈出或在需要提醒的位置附近,一個地兒一個地兒輪播閃現(xiàn)都可以),盡量傻瓜式的,不要讓人培訓后才懂怎么使用(節(jié)省用戶時間)。
  • 思考用戶第一次進入軟件,如何引導他使用的流程和步驟,并在首頁就能開始第一步。(目前B端的產(chǎn)品常見問題就是功能橫向單一,每個功能一個菜單,之間缺乏串連使用的路徑,用戶根本不知道如何使用)
  • 如果是工具類的操作軟件,在首頁要給足相應的操作輔導文案和視頻。如果是辦公任務類軟件,在首頁要很明確展示要做的總數(shù)、待辦具體事情,想了解的信息。
      空間(交互)布局設計好之后,易用性就基本已經(jīng)解決了。
      剩下就是根據(jù)用戶不同的審美,巴洛克,簡潔風,歐式,美式(簡約,科技感,質感,時尚、擬物,酷炫,奢華高端,品牌VI、拙樸古風),任客戶選擇,或者是根據(jù)用戶畫像的調查去推測,根據(jù)產(chǎn)品定位,建立色彩情緒板,研究出這個產(chǎn)品應有的外貌。
      我們藍藍設計一般是有一個UI設計調查表,把各種設計風格和問題列出來,引導客戶在填表的過程中去選擇和思考。
       步步分解之后,工作就會好理解并逐漸輕松。
      只要您去做這件事,開始思考,最終就會知道界面那些功能該怎么擺放。我們的交流中往往發(fā)現(xiàn)客戶是非常有智慧的,一開始可能沒有想法,隨著分析和思考的深入,靈感受到啟發(fā),等到我們設計出方案之后,很會挑方案,能夠感受到不同方案的優(yōu)點,把他們集中在一起。
      最近流行一個新的職業(yè),叫收納整理師,就是幫助陪伴您收拾家。不僅僅是打掃衛(wèi)生,還會告訴你一些斷舍離取舍原則。原有的衣柜空間有什么不足,改進的方法,一些方便收納的小工具,手把手教你各類疊衣服的方法。有些工作(整理房間)自己也能做,但是這個工作太枯燥,工作量又很大,如果有人陪,就能夠被鼓勵著,開心,很有成就的去完成。
      陪伴這個詞很重要,代表著共同參與,相伴成長。

avz1k-b5io7.jpg

      我覺得交互設計師也是在做整理收納這種事情。有些人最喜歡的買買買,買回了太多的東西,又無處安放,屋子變得很亂,開始收納整理,像不像軟件開發(fā)中一些客戶角色,喜歡加一些內容(功能)?這個頁面加一點,那個頁面加一點,過了一陣子,這個軟件(網(wǎng)站)就變得不成樣子,需要維護和整理。
       軟件產(chǎn)品和一個家一樣,他們都是你創(chuàng)造的,如果可以說話,他們可能有許多話想對你:“把我創(chuàng)造的美一些,整潔一些吧,主人
      下面給大家展示幾個實際的案例,我們是怎么從需求到原型,完成這項工作的,設計前后的效果如何?
asm0e-r1gcl.jpg
      就拿我們最近合作的江蘇銳創(chuàng)來講吧,這是一家非常優(yōu)秀的公司,江蘇銳創(chuàng)數(shù)據(jù)中心服務管理平臺項目,產(chǎn)品迭代速度非??欤緝炔孔鲞^很多版本的設計,由于十年來一直在做這套軟件,產(chǎn)生了審美疲勞,不知道到底要怎么做才合適了。各種之前想過的東西都已經(jīng)自己練過了,也實施過了,但就是覺得沒有達到自己理想的狀態(tài),內部設計了一稿又一稿,總是覺得還不夠好。
      使用這個軟件的用戶是企業(yè)中的網(wǎng)管和工程師,專業(yè)人士。在委托藍藍設計之前,內部開發(fā)已經(jīng)迭代四次,企業(yè)內部的交互設計師已經(jīng)把首頁要放的內容思考的比較清楚了。在這類的需求中,藍藍設計的設計師主要的工作是優(yōu)化視覺設計和進行交互設計的局部優(yōu)化處理,通過友好的交互體驗讓企業(yè)用戶享受到高品質的服務。
客戶給的原型圖

a3r1n-6agy9.jpg設計后的效果圖

aniwl-8inwf.jpg

1. 理解用戶所需,優(yōu)化交互,增加部分內容。告警事件除了原型中的時間線按順序發(fā)生外,加了用戶頭像,已處理、待處理、緊急任務統(tǒng)計數(shù)字,讓用戶可以總覽全局,做到對工作量心中有數(shù)。

a3s8x-ilo2u.jpg


2. 數(shù)據(jù)中心信息,秉承著信息簡單易懂,界面引導友好的理解,把信息分組,4個關鍵信息總數(shù)并列2排,設計了相應的擬物化圖標,美觀整理有秩序。在線和離線位數(shù)增加了表達當前比例的橫向柱狀圖,用戶從綠色和紅色的區(qū)塊長短中可以輕松感知,比原型的表達方式又多了一個緯度。

au0ez-pa0w5.jpg


3. 本機系統(tǒng)信息,將單個的數(shù)字轉化為儀表盤,可以表現(xiàn)出高中低預警和正常的多重含義。通過輕擬物的表現(xiàn)手法,增強駕駛艙的沉浸式體驗,營造中控管理氛圍的真實感。
arq3s-18p80.jpg


4. 所有的設計,都是基于對業(yè)務的理解,回到本質,思考用戶是否需要多層次信息的統(tǒng)計分析,不同的緯度呈現(xiàn)結果。最終以感性、直觀、優(yōu)美的方式視覺表達,并考慮到數(shù)據(jù)可視化的控件類型和實現(xiàn)難度。


asm0e-r1gcl.jpg

       中國移動愛流量App整體的設計提案,經(jīng)過用用戶研究分析、同類競爭App競品分析報告、產(chǎn)品定位、功能分析、交互設計、視覺設計。中國 移動只提供了運行中的上一版App,其它的調研、改版策劃由藍藍設計進行。

這個案例比上一個案例更加整體,重大的項目應該采用這種方式來進行。

1   同類產(chǎn)品APP對比:

藍藍設計觀察了20家流量類的App。通過在應用市場監(jiān)測流量平臺類app的下載量,我們選取以上三家為競品。

『流量寶』中國電信出品。

『流量銀行』中國聯(lián)通出品。

『流量來了』,世紀龍信息網(wǎng)絡有限責任公司出品。

分析內容:

1. 界面布局對比

2. 核心功能對比

3. 色彩對比

4. 首頁印象對比

5. 界面設計優(yōu)缺點

2 產(chǎn)品洞察 明確產(chǎn)品的定位和發(fā)展方向

按照用戶對于流量的認識、了解、使用的程度,通常流量經(jīng)營可以分為三個發(fā)展階段。

在流量消費培育階段(2008-2012年),隨著智能手機的快速普及,客戶上網(wǎng)頻率逐漸加大,對于網(wǎng)絡的使用逐漸從PC互聯(lián)網(wǎng)向移動互聯(lián)網(wǎng)轉移,其標志就是智能手機用戶在2013年超過了PC保有量。這個階段主要以前向流量客戶經(jīng)營為主,采取流量包月甚至流量免費等方式驅動流量增長。

在流量理性消費階段(2013-2014年),流量消費習慣逐漸養(yǎng)成,運營商開始改變甚至取消流量包月無限量使用策略,用戶開始感受到流量的費用壓力,開始對自身的消費行為和內容進行整理,逐步回落到用戶能夠承受的流量消費水平。而流量經(jīng)營主要收入來源依然是個人客戶。

在流量后向經(jīng)營階段(2014年-),隨著運營商發(fā)現(xiàn)流量收入增速放緩的現(xiàn)象,運營商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業(yè)的運營。至此,運營商正式邁入流量平臺化經(jīng)營時期。

產(chǎn)品不斷的迭代,使我們的產(chǎn)品在不斷的完善。 流量平臺的定位也在不斷的跟隨行業(yè)的變化在不斷的變化,才能使我們的產(chǎn)品得到用戶的認可。

功能方向:使產(chǎn)品向貨幣化、社交化、媒介化轉變。

增加用戶使用率,創(chuàng)造可以長期登錄使用的情景和功能。

基于個人:監(jiān)測自己的手機流量及使用情況,提醒自己:少了可以買,也可以把多余的流量轉給家人、朋友、同學、或充入手機、

基于社交:比如:發(fā)紅包、賺流量、做任務、簽到送流量,流量兌話費等、是可以嘗試的方向,使我們的產(chǎn)品向貨幣化、社交化、媒介化轉變。

aaryx-rj02r.jpg

視覺方向:使我們的產(chǎn)品更加的年輕化、擁抱90、00后。

交互方向:減化路徑、清晰簡潔

3 基于產(chǎn)品分析策劃進行主頁的交互設計

在不斷的思考、對功能的深入理解后,交互設計師對首頁構圖了三個方案,希望能契合產(chǎn)品定位并在布局和表現(xiàn)形式上與競品區(qū)別,展現(xiàn)出愛流量的。

團隊討論思考后,認為將“流量監(jiān)測和流轉“做為首頁目前重點,賺流量做為以后發(fā)展點。確定第二種布局(中),進行視覺設計。 

aca46-05o6b.jpg

avjc5-qtihj.jpg

4 視覺設計成果

a34bi-3t998.jpg

主頁設計風格確定后,就可以進行其它頁面的視覺設計啦。



a1uzd-ibxp3.jpg

  1. 軟件的優(yōu)化設計是一個長久的的事,挑一些典型頁來設計是基礎的部分。

  2. 目前國內都在進行數(shù)字化升級進程,這一二十年來,從不知UI為何物,到企業(yè)紛紛重視,每個企業(yè)都有自己的設計師,重點的項目再外包給專業(yè)公司。關注整個用戶體驗,用體驗地圖觸點做設計,在中型的項目上存在認識不夠或目前達不到應有的預算和精度。未來發(fā)展中,相信會漸逐把重要軟件的整體用戶體驗設計、服務設計、品牌設計的融入做為增長點。

  3. 藍藍設計公司有一個群,每天都在分享好的UI設計,如果你有興趣,請報上姓名和公司職位,我們共同成長和學習。請加微信ben_lanlan, 標注“想加入設計分享群”.


如何找到一家好的高端網(wǎng)站設計公司?

藍藍設計的小編

       看到知乎上的一個問題:如何找到一家好的高端網(wǎng)站設計公司?

       把回答的內容也轉過來記錄一下。


       首先回答:何為高端?



       高端與低端是對應的,目前網(wǎng)站設計,中低端基本是用模板改改,相對價格低,有一些小型公司或不依靠網(wǎng)站運營收入的公司,“有個網(wǎng)站就好”,所以可以用這種低投入,內容有就行的網(wǎng)站建設公司,特點是馬上就能用,三五天把內容發(fā)布進去就可以。備案可能需要一定時間。



       高端設計公司,一般是量身定做,為企業(yè)做網(wǎng)站策劃、分析,按照用戶研究、網(wǎng)站建站的目的來進行網(wǎng)站的定制欄目頁的設計。做競品分析、研究對方的優(yōu)缺點,設計的色系和企業(yè)標準色、情感表達、人物場景、用戶體驗思維,越深入,思考越成熟,做的網(wǎng)站品質越有保障。所以需要的時間、精力、投入相對多。



       因為投入相對多,所以經(jīng)營業(yè)績好的企業(yè)、集團公司、營銷類大型網(wǎng)站來定制的比較多。



       我們公司“北京藍藍設計”就是為定制的高端企業(yè)用戶、政府網(wǎng)站、軟件公司來服務的。我們挺喜歡要求高的客戶,這樣能體現(xiàn)出專業(yè)設計的水平,這也是我們和其它建站公司區(qū)別開來的地方。



       我們主要是給大型軟件公司平臺、系統(tǒng)做UE、交互設計、視覺設計,用戶體驗優(yōu)化,這個,比網(wǎng)站設計更難,更專業(yè)。 往往一個公司的核心產(chǎn)品,值得把精力金錢投入到上面,產(chǎn)出最大的回報。近年來,除了做軟件UI,大屏大數(shù)據(jù)可視化項目外,我們也擴展了“愿意把公司網(wǎng)站做成核 心產(chǎn)品”這樣的公司成為合作伙伴,更好的為客戶提供全方位的服務。



       一旦成為我們的客戶,設計無憂。


       我們一定會把該做的事做好,并提供超值服務和額外附加值的。


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務



藍藍設計隨筆:ui用戶界面中的表格設計

藍藍設計的小編

作者:藍藍


表格,是一種最常見的信息組織整理手段,常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設計中最常用、最基本的是表格的設計,有些軟件中80%都是表格類頁面,可以說,設計開發(fā)的是否易用,很影響口碑和用戶的使用感受?;A的東西一定要做好,就像我們吃的主食一樣,雖然都是米和面,但是各地出產(chǎn)各種品種口味都不相同,要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。

一、基礎的表格設計美化

      基礎的表格可變化的地方很少,可以根據(jù)當前軟件開發(fā)選擇的框架控件(ext/vue/jequery不同框架會有一些不一樣)做色彩和風格的變化,如:加表格不同粗細的線、斑馬格,中間無豎線種種的設計,有的表格需要標題很突出,有的內文突出,這就和內容焦點相關了。

點擊查看原圖


為了操作直觀便捷,在操作區(qū)放一些圖標“刪除、編輯、審核”,配合文字來使用,有的把操作類的圖標放在最左邊,有的放在最右側,按行業(yè)用戶習慣而定。

 點擊查看原圖

可以用固定表頭(標題位置不變),允許用戶排序,單元格內有很長的文字,設定最大字節(jié),多內容用……替代避免轉行,有小數(shù)點的數(shù)字右對齊,每列的大小可調整,這些也是設計開發(fā)中可以做好的細節(jié)部分。


二、特別寬的表格怎么設計?


有的表格的寬度,達到了屏幕的兩屏和三屏,出現(xiàn)寬寬的橫向滾動條,又有長長的豎向滾動條,但工作的人又必須看,可煩人了!很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題:

方法一

如果表格的標題是可以定制的,允許省略的,可以從業(yè)務角度取舍去掉無關緊要的,不常用的內容,把這部分放在點開的詳細頁內容中即可。這就像一個房間的斷舍離:挑選、丟棄、分類、收納,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可無的?依次排序放在順手的位置,ui設計的道理也是相通的。

方法二

如果表格里面的內容是確定的,不可省略的,比如銀行的報表就是這么長,這么多,那我們就可以從設計的角度來優(yōu)化,做一個加高版的表格。

點擊查看原圖

表格為什么一組信息只能一行呢?完全可以一組三行四行,在組中進行重點信息,非重點信息以及符號化的直觀轉變。用大小、對比、濃淡、色彩、間隔這些平面設計的基本原則,讓一個普通的“山里娃”土土的表格變成一個“青春靚麗、人見人愛”自帶明星氣質的表格。

方法三

大表格里面嵌套小表格,利用交互設計,巧安排空間。當用戶光標移至感興趣的那行的時候,關于它更多的內容,在下方滑動撐開出現(xiàn)或者右邊浮動出現(xiàn)。這個方式雖然比較土,但也確實管用。早年在看某一招聘網(wǎng)站的時候,每一個人的簡歷只要點名字就可以看到一組關鍵信息,便于迅速篩選,而另外一個招聘網(wǎng)站,就沒有這個功能,每個人都要打開之后才能看見整體信息,我后來就不怎么看那個網(wǎng)站了。多一步操作,對典型用戶就多了許多的工作量,網(wǎng)站和軟件的使用口碑,用戶粘度就是這樣在為用戶考慮中一點一點積累起來的。

 屏幕快照 2020-06-08 上午11.03.47.png上圖:大表格里面嵌套小表格


     方法不會只有這三種,其他的方法要根據(jù)當時的業(yè)務,用戶使用的習慣、重點,因地制宜的去設計了。軟件中的表格節(jié)省了許多程序工程師的工作量,如果做大的改動或許是巨大的工作量,如果要做變動,一定要在開始的時候就要讓ui設計納入開發(fā)體系,一生二,二生三,在前期第一批實施時越注重細節(jié),后期就會越輕松,甚至省去幾倍甚至幾十倍的時間挨個頁面的去糾偏、修改。

      一個系統(tǒng)總是需要業(yè)務擔當,顏值擔當?shù)暮诵牟糠?,重要的頁面要額外的對待、花更多的精力和時間。如果千篇一律,也就不能顯示出軟件產(chǎn)品的獨到之處了。

 

第三 與表格配合的部分設計

第一種  “搜索查詢”和“過濾”部分的設計

     大多數(shù)表格的前面都有搜索過濾功能,如果搜索條件相當多,可以精選一部分主要的排成一行,其他的隱藏,點箭頭再出現(xiàn)。整個搜索區(qū)域也可以有隱藏/顯示的按鈕,來給下面的表格更多的空間。

     過濾條件區(qū)域可以定義好“條件名稱”一致寬度,一般在八個字左右,避免有的字節(jié)多,有的字節(jié)少,行數(shù)多了,參差不齊,區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距,這樣整體頁面就顯得整齊劃一、條理清晰。點擊查看原圖

點擊查看原圖

上圖:搜索和卡片式信息的組合

第二種  表格操作部分的設計

       對表格的操作“導入,導出、批量導出”有的時候這類操作有1020個,有的時候才幾個,多的時候很占地方,可以用隱藏的方法,over到表格上再出現(xiàn),以節(jié)省空間。

       也可以分組把同類的操作聚合在一起,把常用的放在目之所及,不常用的點后下浮出現(xiàn),以節(jié)省空間,

還可以光標跟隨表格的某一行,點選自動浮出一群小跟班,各種操作按鈕。即節(jié)省空間,操作移動路徑又很短。只是不支持批量操作。

 

第三種  表格和卡片式設計、統(tǒng)計圖的整合切換

       表格是可以轉換成卡片式設計的,用一個卡片代替一行的展現(xiàn)信息,改變一種閱讀的方式。

有的也可以轉換圖統(tǒng)計圖表:曲線圖,柱狀圖讓用戶直觀的去解讀,而不必一直看枯燥的數(shù)字。

 點擊查看原圖


日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔