HTML5를 사용하여 Netease Weibo 웹 앱 개발 과정 소개

의견 :이 기사는 Netease Weibo의 HTML5 개발의 전체 과정을 소개합니다.

Netease Weibo의 iPhone 플랫폼 웹 앱 제품은 2012 년 1 분기에 성공적으로 시작되었습니다. 이제이 프로젝트 개발에서 배운 경험과 교훈을 공유 할 것이며 HTML5 개발 환경에서 여러분과 함께 성장하기를 바랍니다.

직원

1. 개발자 구성

제품 관리자 : 1 사람;

상호 작용 디자이너 : 1;

비주얼 디자이너 : 1;

프론트 엔지니어 : 1;

백 스테이지 엔지니어 : 2;

테스터 : 1 명.

2. 개발 시간

상호 작용 디자이너 : 22 일 영업일;

비주얼 디자이너 : 14 일 영업일;

프런트 엔드 엔지니어 : 50 일 영업일;

백엔드 엔지니어 : 원래 백엔드 데이터를 사용하기 때문에 데이터를 호출하기 위해 프론트 엔드 엔지니어와 협력하면됩니다.

그중에서도 상호 작용과 프론트 엔드는 전체 개발주기에서 가장 오랜 시간을 사용합니다.

Netease Weibo 웹 앱 개발 프로세스

1. 기능 요구 사항 계획 : 웹 및 로컬 클라이언트와 다릅니다.

담당자 : 제품 관리자; 참가자 : 인터랙션 디자이너

Netease Weibo 웹 앱 (모두이 기사의 휴대 전화 참조)은 웹 제품과 다르며 현지 고객과 다릅니다.

1. 웹과 비교하여 Netease Weibo 웹 앱은 이동성 및 미디어가 풍부한 강력한 이점을 가지고 있으며 소규모 정보 프레젠테이션 공간 및 심층 정보 아키텍처와 같은 단점이 있습니다. 둘의 사용 상황은 다릅니다. Weibo 웹은 주로 풍부한 시간과 우수한 네트워크 조건에서 몰입 적으로 사용됩니다. Weibo 웹 앱은 주로 사소한 시간과 고르지 않은 품질의 네트워크 조건에서 사용됩니다.

따라서 Netease Weibo 웹 앱은 크고 완전한 기능을 피하고 웹에서 모바일 환경에서 사용자가 가장 일반적으로 사용하는 기능을 추출하고 선택해야하며 모바일 측면에서 고유 한 요구 기능을 추가해야합니다 (예 : 현지화 된 서비스 기능은 반복 단계에서 고려됩니다).

2. Netease Weibo Web App은 현지 고객과 비교하여 설치 없음, 간단한 업그레이드, 낮은 개발 비용 및 적응 가능한 레이아웃의 장점이 있습니다. 또한 느린 응답 속도의 장점, 휴대폰 기본 컨트롤 검색에 대한 낮은 권한 및 약간 약한 안정성이 있습니다.

Netease Weibo 웹 앱은 두 가지의 장점과 단점을 바탕으로 현지 고객의 고품질 경험을 따라 가볍고 빠르게 보장해야합니다.

한마디로, 웹 앱의 기능은 웹 및 로컬 클라이언트의 기능보다 더 세련 될 수 있으며 모바일 환경에서 사용자의 가장 핵심 요구를 충족시킵니다.

Netease Weibo 웹 앱 기능 계획 : 아래와 같이 :

2. 정보 아키텍처 설계 : 가능한 한 얕고 좁아

담당자 : 상호 작용 디자이너; 참가자 : 제품 관리자

모바일 인터넷 제품을 만든 사람들은 정보 아키텍처가 가능한 한 얕고 좁아야하는 이유를 알아야합니다. 가장 큰 이유는 휴대 전화의 작고 비싼 디스플레이 공간 때문입니다. 휴대 전화의 로컬 클라이언트의 정보 아키텍처는 얕고 좁아야하며 웹 앱에는 브라우저 페이지에 브라우저의 하단 도구 모음이 있기 때문에 이미 작은 비좁은 디스플레이 공간을 섭취 할 수 있기 때문입니다. 아래 그림과 같이 :

휴대 전화 화면 하단의 브라우저 도구 모음은 웹 앱 제품의 경우 매우 쓸모가 없습니다. 웹 앱 자체는 폐쇄 루프 응용 프로그램이며 브라우저 도구 모음이 필요하지 않습니다. 대규모 정보 아키텍처에 영향을 미치지 않더라도 소중한 디스플레이 공간을 침식하고 내비게이션 시스템의 설계에 중요한 영향을 미칩니다 (이 부분은 이전 기사 "iPhone 웹 앱의 탐색 설계에 대한 토론"에서 간단히 분석되었습니다.).

WebJX 기사 소개 : Netease Weibo, HTML5의 실제 개발.

3. 상호 작용 설계 : 간단하고 효율적입니다

담당자 : 상호 작용 디자이너; 참가자 : 제품 관리자, 비주얼 디자이너, 프론트 엔드 엔지니어, 백엔드 기술자

상호 작용 설계 개념 :

이 제품의 특정 상호 작용 설계 개념은 사용자 사용 시나리오 설문 조사, 경쟁사 분석, 웹 앱 연구 상태 및 Weibo 웹 앱의 자체 요구 사항에서 비롯됩니다. 마지막으로 요약 된 상호 작용 설계 개념은 주로 다음과 같습니다.

1. 검색의 용이성 향상 :

글로벌 내비게이션 강화, 홈페이지로의 빠른 복귀, 정기적 인 공통 작업,시기 적절한 애니메이션 데모, 간단하고 명확한 웹 페이지 레이아웃 등

2. 사용 효율성을 향상시킵니다

정보 아키텍처 수준을 줄이고, 적절한 단축키 키 입력을 제공하고, 안전한 터치 영역을 보장하고, 사용자 브라우징 습관을 고려하고, 핵심 기능에 우선 순위를 부여하고, 불필요한 시각적 노이즈를 제거하는 등.

3. 더 지능적이고 배려합니다

오프라인 사용, 예상치 못한 중단 후 편집 정보의 자동 채우기, 경고 상자의 신중한 사용, 검색 제안 구현 지원, 현재 작업 요구를위한 도구 모음, 활성 및 효과적인 피드백 등을 지원합니다.

4. 작업 집중력을 향상시킵니다

단일 작업 작동 경로, 적시에 숨겨진 탭 탐색, 간섭 요인 제거, 사용할 수없는 버튼 그레이 스케일 디스플레이, 작업 페이지 최대화, 기능 최소화 등.

5. 플랫폼 일관성 :

지금 시청하고 클릭하고, iOS 플랫폼의보기 목록, 앞으로의 푸시 화면 애니메이션 및 반환 작업 및 반환 작업, iOS 플랫폼의 모달보기, 경고 상자, 호출 기본 컨트롤, 간단하고 명확한 점프 논리 등을 푸시하십시오.

이 단계의 대화 형 디자인 개념은 더 이상 개념 일뿐 만 아니라 웹 앱 제품에 대한 특정 설계 지침에 관한 것입니다. 아름다운 디자인 개념을 전달하는 설계 구현 방법은 설계 연구 단계에서 중요한 구현입니다.

많은 디자인 컨텐츠와 세부 사항이 있습니다. 여기에서는 여러분과 공유 할 세부 정보 만 선택할 것입니다.

검색의 용이성 향상 - 향상된 글로벌 탐색

원래 WAP Weibo와 비교할 때 글로벌 탐색 막대의 고정 된 존재는 큰 변화입니다. 이에 대한 이유를 간단히 분석하겠습니다.

- 사용자의 사용 환경은 무엇입니까? - 실외 모바일 상황 (지하철 또는 줄 등) 또는 실내 유휴 상태 (예 : 잠자리에 들기 전에 Weibo 탐색);

-이 페이지에 오는 사용자의 목적은 무엇입니까? -Browse Weibo;

- 사용자 가이 페이지에서 사용하는 일반적인 조치는 무엇입니까? - 읽기, 상단 및 새 정보를로드하고, 다른 탭을 클릭하여 점프를 수행하십시오.

- 글로벌 내비게이션 바가 상단에 고정 된 경우 어떤 이점이 있습니까? - 사용자가 상단으로 돌아 가기 편리하고, 사용자가 새로운 정보를로드하는 데 편리하고, 사용자가 탭을 전환하는 데 편리하며, 글로벌 제어가 강력합니다.

- 글로벌 내비게이션 막대가 상단에 고정 된 경우 단점은 무엇입니까? -소중한 정보 표시 공간

…………

사용자가 사용하는 동안 고정, 새로 고침 및 스위칭 탭의 동작도 비교적 빈번한 동작이며 작동의 편의를 보장해야합니다. 고정 된 글로벌 내비게이션 바는이 요구 사항을 충족 할 수 있습니다. 홈 키를 클릭하고 새로 고칠 수있어 사용자가 탭을 전환 할 수 있습니다. 동시에 고정 된 글로벌 내비게이션 바를 통해 사용자는 어디에 있는지, 어디로 갈 수 있는지 명확하게 알 수있어 사용자에게 글로벌 제어력을 강력하게 알 수 있습니다.

4. 시각적 디자인 : 신선한 스타일의 실험

담당자 : 비주얼 디자이너; 참가자 : 제품 관리자, Interaction Designer, 프론트 엔드 엔지니어

Netease Weibo 웹 앱의 시각적 스타일의 결정은 여러 각도를 통해 논의되었습니다.

1. Netease Weibo Local Client와의 색조를 유지해야합니까?

제품은 다양한 플랫폼에서 특정 일관성을 유지해야하며 컬러 스타일은 제품 기질을 형성하는 데 중요한 부분입니다. 그렇다면 Netease Weibo의 현지 고객과 유사한 스킨을 사용해야합니까? Netease Weibo의 로컬 클라이언트의 주요 색상은 빨간색입니다.

분석은 다음과 같습니다.

-이 빨간색 사용의 이점은 다음과 같습니다. 더 강력한 제품 일관성; 빨간색으로 형성된 제품 기질이 더 활력이 넘칩니다.

-이 빨간색을 사용하는 단점은 빨간색 영역이 Weibo 함량에 비해 약간 눈길을 끄는 것입니다. 몰입 형 독서는 달성하기가 더 어렵다는 것입니다.

Safari 브라우저를 통해 Netease Weibo 웹 앱을 사용하면 최종 시각적 효과는 로컬 클라이언트의 시각적 효과와 다릅니다. 브라우저 도구 모음은 항상 화면 하단의 공간을 차지합니다. 빨간색은 비교적 시끄러운 색상이며 브라우저의 도구 모음은 파란색과 회색이며 비교적 조용합니다. 이 두 가지 색상 사이의 큰 간격은 안경을 매우 불편하게 만듭니다.

위의 분석을 바탕으로 로컬 클라이언트의 붉은 색을 사용하는 것은 적합하지 않습니다.

WebJX 기사 소개 : Netease Weibo, HTML5의 실제 개발.

2. Safari 브라우저에서 실행하는 데 어떤 영향을 미칩니 까?

Netease Weibo 웹 앱은이 제품의 환경 중 하나 인 Safari 브라우저에서 실행되고 표시됩니다. 웹 페이지는 사람들에게 가볍고 능률적 인 느낌을주는 반면 지역 고객은 사람들에게 무겁고 안정적인 느낌을줍니다.

따라서 가벼운 시각적 스타일은 좋은 선택입니다.

3. 현재 시각적 스타일 트렌드

Metro UI와 Google+가 이끄는 신선한 스타일은 중요한 시각적 스타일 개발 트렌드가되었습니다. 절묘하고 복잡한 시각적 경험의 기간이 지난 후, 나는 단순성으로 돌아 왔고 신선한 시각적 스타일이 인기를 얻기 시작했습니다.

따라서 비주얼 디자이너는 빨간색, 시원한 검은 색 및 신선한 밝은 회색을 포함한 몇 가지 시각적 시도를 시도했습니다. 여러 당사자와 비교 한 후 모든 사람들은 신선하고 밝은 회색이라는 데 동의했습니다. 신선하고 밝은 회색은 주요 색상이며, 아이콘 클릭 상태는 Netease가 일반적으로 사용하는 빨간색으로, 시각적 스타일의 일관성을 어느 정도 유지합니다.

5. 프론트 엔드 개발 : 트릭을 깨뜨립니다

담당자 : 프론트 엔드 엔지니어; 참가자 : 제품 관리자, Interaction Designer, Visual Designer, 백엔드 기술자

이 부분에 도달하면 특정 코드의 모습과 구현 프레임 워크가 어떤지에 대해 더 우려 할 수 있습니까? 죄송합니다. 회사와 관련된 제품 비밀 및 특정 구현 코드를 모든 사람에게 표시 할 수는 없습니다. 나를 용서해!

여기서 우리는 간단히 답변하기 위해 네티즌 2 개의 질문을 선택합니다.

질문 1 : 프론트 엔드 아키텍처에 대해 이야기 할 수 있습니까? Sencha가 사용되지 않는 이유는 무엇입니까?

답변 : Sencha T 당신이 말했듯이, 그것은 SEAJS를 사용하여 스크립트로드를 처리하고 iScroll은 스크롤을 시뮬레이션합니다. 그 효과는 여전히 좋은 것 같습니다. Netease 프론트 엔드는이 프레임 워크를 계속 향상시킬 것입니다.

질문 2 : 사진을 찍고 사진을 업로드 할 수 있습니까?

iPhone Safari는 카메라와 갤러리를 검색 할 수있는 권한을 부여하지 않으므로이 요구 사항은 아직 충족되지 않았습니다. 그건 그렇고, 안드로이드가 권한을 부여한다면, 당시에는이 긴급한 요구를 충족시킬 것입니다.

6. 후속 작업

후속 작업에는 주로 대화식 검사, 시각적 검사, QA 테스트, 요약 및 피드백이 시작된 후 문제를 해결하고 다음 반복 계획을 세우는 것이 포함됩니다. 모두가 프로젝트 프로세스를 이해하므로 많이 말하지 않을 것입니다.

이것으로부터 배운 교훈

1. 워크 플로에 대한 감정

1. 가이드로서 훌륭한 경험 디자인이 되십시오.

이 프로젝트는 설계 지향적 접근 방식의 전형적인 예입니다. 첫째, 디자이너에게는 충분한 시간과 공간을 플레이 할 수있는 반면 기술은 반격 할 수 있습니다. 이 작업 아이디어는 좋은 사용자 경험을 얻기 위해 전체 제품의 초석입니다. HTML5 기술은 강력하고 가능성이 너무 많습니다. 그리고 디자인은 이러한 기술적 가능성을 금형으로 형성하는 것입니다.

2. 제품 관리자, 상호 작용, 비전, 프론트 엔드 커뮤니케이션 적시에 빈번한 방식으로

전체 프로젝트에서 제품 관리자, 인터랙션 디자이너, 시각적 디자이너 및 프론트 엔드 엔지니어는 매주 회의를 개최합니다. 나중에이 빈번한 의사 소통이 재 작업 속도를 크게 줄이고 개발 효율성을 향상 시켰다는 것이 증명되었습니다.

3. 작은 단계로 빠르게 달리고 반복에 집중하십시오.

Netease Weibo 제품은 비교적 복잡하며 HTML5의 개발 진행은 비교적 느리고 인력은 제한적입니다. 모든 기능적 세부 사항을 완료하고 동시에 온라인으로 이동하는 것은 불가능합니다. 그렇지 않으면 나중에 디버그하는 데 한 달이 걸리며 제품의 빠른 개발에 큰 부담이 추가됩니다. 따라서 첫 번째 호에서 가장 핵심 기능 만 수행하는 것은 불가피한 선택이되었습니다.

2. 사용자 경험

1. 내비게이션 시스템은 화면 상단에 더 적합합니다.

브라우저의 도구 모음은 항상 존재하여 탭 탐색 막대가 더 이상 화면 하단에서 고정하기에 적합하지 않으며 상단이 더 적합합니다.

2. 편의성이 더 중요하며 가장 일반적으로 사용되는 기능은 영리하게 설정됩니다.

제품 성능 및 브라우저 성능으로 인해 현재 웹 앱 유창성 및 점프 속도는 여전히 기본 앱과 비교할 수 없으며 점프 비용이 약간 높습니다. 따라서 점프로 인한 대기 비용을 줄이기 위해 가장 일반적으로 사용되는 기능을 사용자에게 더 가깝게 만들어야합니다.

3. 시각적 초안은 미학과 단순성의 균형입니다. 대부분의 시각적 초안은 코드를 사용하여 구현해야합니다.

거의 모든 비전은 코드를 통해 구현되며 시각적 디자인에 너무 복잡하지 않은 것이 가장 좋습니다. 또한 프론트 엔드 엔지니어가 시각적 초안을 소화하는 데 시간이 걸립니다.

3. 기술 구현에 대한 이해

1. Safari 브라우저의 허가 제한은 카메라 도구를 호출 할 수 없으며 이미지 업로드 기능을 지원하지 않습니다.

이것은 두통이자 무력한 것입니다. iOS 시스템에 웹 앱에 대한 권한이 너무 낮습니다. 대조적으로, Android 시스템의 웹 앱은 카메라 컨트롤을 검색하고 Weibo 이미지 업로드 기능을 지원할 수 있습니다 (그러나 Android 버전은 아직 개발되지 않았습니다).

2. 컷 신은 현지 고객과 같은 원활한 효과를 얻을 수 없습니다.

그 이유는 다음과 같습니다. 좋은 컷 신은 제품의 성능을 침식 할 것입니다. HTML5 기술은 완벽하고 성숙하지 않습니다. 여전히 강력한 브라우저가 부족합니다.

요약

iOS 시스템의 권한 문제 외에도 웹 앱의 탁월한 성능은 기본 앱의 성능에 가깝습니다. HTML5 기술은 WAP 웹 페이지에 새로운 삶을 제공하고 WAP에 파괴적인 변화를 가져 왔습니다. HTML5 프로젝트에서 기능 계획은 정제에 가장 좋습니다. 정보 아키텍처는 가능한 한 얕고 좁아야합니다. 상호 작용 설계는 단순성과 효율성을 위해 노력해야합니다. 비주얼 디자인은 또한 브라우저의 특수 운영 환경을 고려합니다. 프론트 엔드는 점차적으로 인터랙션 디자인과 시각적 디자인을 소화 할 필요가있을뿐만 아니라 새로운 기술과 새로운 문제에 대해 대담하게 반격하려고합니다. 전체 팀 간의 빈번한 의사 소통은 매우 필요하며 작은 단계를 수행하고 빠른 개발 단계를 수행하는 것이 가장 좋습니다.

인력과 에너지가 제한되어 있기 때문에 필연적으로 편견이 있습니다. 모두가 소란을 일으킬 수 있습니다! 이 흥미로운 주제를 여러분과 논의하기를 기대합니다.