E TASK 3 設計登入介面

2021-06-08 06:35:31 字數 2159 閱讀 1695

12-7-18

前天,開始指導老師找到我們的團隊開了個會,認為我們要趕緊開始完善介面。於是決定,讓我暫停前台**的學習,直接開始學習和進行介面的設計。 

然後,又過了兩天。

第一天,由於一直在學暫時什麼都用不上的**,一直期待開始著手專案的介面設計。但是突然機會來了,卻有點無所適從。

一下午都在思考怎麼樣完成這個介面方案。結果想太多了,腦子一團漿糊。思維的慣性始終纏著我,走到**都在想這個,但是越想越糟糕。整個人都好糾結…… 

第二天,決定摒棄這種糟糕的狀態。乙個人急躁的心態下不能完成乙個成功並且讓人愉快的設計。聽聽**,看看雜誌,換個心情,找找創意。接著學習《互動》,感受設計的美妙。讓腦子活過來。 

第三天,今天。

oops, not an easy thing. 

我加入這個團隊的時候,需求挖掘和互動介面設計已經完成了,並且大家已經使用乙個較簡略的介面開始了功能的實現。我要做的工作實際上主要是系統的視覺設計。 

了解專案背景,確定介面風格,設計典型介面,完成所有介面。 

總結一下產品性格:效率/簡潔。親近/清爽。嚴謹/條理。

微博是乙個方便人交流的工具,它旨在讓人們的生活更加輕鬆愉快,因此大多微博**都選擇了輕快的藍色和清淡的介面。而公司管理,強調的是效率,給人一種有壓力的感覺。怎樣把這兩個幾乎矛盾的性格融合到一種介面中去,讓我大傷腦筋。這都是後話了,再難也要自己一步一步來。這是個題目,但沒有人能告訴我正確答案,它就沒有正確答案,嗯,是個好題目。

《互動》上面貼心地提供了幾個實用的**:

全景網:www.quanjing.com

按照組長的安排,我從乙個登入介面著手,嘗試實際的介面設計。

先介紹一下登入介面的互動設計吧。e-task的登入介面要求實現兩個功能:使用者登入+員工**展示。設想的員工**(當然同時有員工的姓名、部門等)展示目的是讓上下級或者員工之間,在登入該系統的時候,能夠有乙個視窗互相了解,這也是我們幫助企業實現扁平化管理的乙個細節。按照指導老師的設想,頁面分為左右兩塊,一邊登入,一邊展示。 

那麼我現在想要做的,就是以這個作載體,嘗試尋找和確定我的介面風格。 

這個過程中我一直在想象介面的細節,想想怎樣的配色和模組風格才適合這個介面。頭一次認真做介面設計,我知道我會碰很多壁,但是無論如何,其中創造的過程和最終得到作品的結果的樂趣是無法阻擋的!加油吧,少年~

之前的設想得幾個配色方案:

最終覺得最妥帖的是深紅、深藍和灰白黑的搭配,因為在我心中對這個專案的詮釋,嚴謹終究佔了上風,只有輕快的顏色會讓介面失去這種品質,而像褐灰、橙灰這一系的顏色似乎又少了點活力,深紅、深藍、墨綠這些顏色與灰色性搭配感覺就很不錯,相搭配,除了紅綠相差太大,都很不錯,而之所以傾心紅藍使因為,e-task實際上是為picc準備的,而picc企業的主體色是紅色所以選紅色以迎合該企業的審美,而且主流微博的顏色基本都是藍色,出於對前輩行事的尊重(雖然深藍和淺藍差別太大),我偏執的選擇了它。但是實際上,光看這幾個顏色,還是覺得比較死板,怎樣體現出微博的靈動輕快,就要看具體的細節處理了。

在網上搜尋各種設計以後,tweeter登入介面和愛奇異、朋友網的幾個介面讓我有了點子:

上方的一大塊純色背景,大氣,簡潔。下面是**。不過,這種**size只不過能起到乙個點綴美觀的作用,對於我需要的功能來講偏小了。

看~左右兩邊布局……左邊是展示,右邊是其他功能。這是乙個不錯的方案。

這個左右布局更清爽了,更接近我想要做的。啊,我可以想象我的**展示出現在左邊是多麼可愛~~

用ps簡單借這幾個精彩的介面為素材按我想要的方式變換重置實現一下,看看大致效果:

相當不錯!

弄完這些,時間也不早了。好好的自戀一下,欣賞一下自己的點子,啊,真是不錯啊~哈哈哈哈哈…… 

明天,用ps實際繪製該介面的設計圖稿。

登入介面設計

每個系統都有自己的賬戶系統,有賬戶系統,那就必然面臨登入的概念,登入就要在網際網路中傳輸密碼,在網際網路中傳輸密碼就存在被人攻擊和竊取的可能,如何做到密碼傳輸安全可靠呢?https就已經保證了傳輸安全,不需要再進行加密 有些大廠,為了能監控員工的網路,防止重要資料外洩,會在你的電腦上面安裝企業證書,...

使用者登入及API介面設計

原文 這篇思路可以算目前主流設計方案,其中可能產生的疑惑點解析 1 如果是web分離開發秘鑰可以採用非對稱加密 2 安全性上面採用https ps 在安全性要求不是非常嚴格的情況下,不用tls的 安全 都是掩耳盜鈴 華麗的分割線 1 web api的介面訪問分類 web api介面的訪問方式,大概可...

登入介面設計之三 介面搭建

登入介面的搭建還是比較簡單的,雖然有點簡陋,但能用的姑且當做好的吧,如下圖 這裡使用的是devexpress控制項,其中值得一看的就是使用layoutcontrol控制項來進行textedit控制項的布局。對於一般幾個textedit併排的布局而言,使用這個控制項的效果還是不錯的。既然涉及到了系統的...