Githawk: 와이어프레임/설계 프로필

나는 그래픽 디자이너는 아니지만 아마도 이것이 여기에서 토론을 촉발시킬 수 있습니다. 컨셉의 느린 진행 가능성을 보여주려고 노력했습니다.

저도 지적하겠습니다. 나는 북마크가 탭바의 중앙 아이콘인 것을 별로 좋아하지 않는다. 어떤 이유로 나는 그것이 프로필이나 받은 편지함이어야 한다고 생각합니다. 하지만 나는 그것에 집중하지 않았다

🔥🔥🔥 @Huddie !

GitHub의 현재 디자인 중 일부에 대한 빠른 참조를 위해 여기에 다음 이미지를 포함합니다. GitHub 이외의 새로운 영감의 원천을 찾는 것은 멋진 일입니다.

@BrianLitwin 매우 동의합니다. Github 프로필은 웹에서는 훌륭하지만 모바일에서는 잘 복제될 수 없다고 생각합니다. 우리는 외부에서 영감을 찾아야 하지만 친숙한 인터페이스를 유지하려고 노력해야 합니다. 페이지를 시작하기 쉽게 유지하려고 노력했습니다. 나중에 더 잘 만들 수 있다는 것을 알고 있습니다.

지시 사항처럼! 너무 깊이 들어가기 전에 정보 계층 구조 가 무엇인지부터 시작해야 한다고 생각합니다. 프로필에 존재할 수 있는 많은 것들이 있습니다!

• 화신
• 사용자 이름
• 이름 표시하기
• 약력, 위치, 링크
• 조직
• 고정된 저장소
• 레포
• 팔로워, 팔로우
• 별
• 활동

그런 다음 취해야 할 조치 가 있습니다.

• 팔로우, 언팔로우
• 공유하다
• 차단, 신고

영감

약간의 브레인스토밍을 통해 우선 순위에 따라 순위가 지정된 버킷으로 이를 분할할 수 있습니다.

1. 누구?
   ㅏ. 개인의 정체성
   
   
   
   1. 화신
   
   
   2. 사용자 이름, 표시 이름
   
   
   3. 바이오
   
   
   4. 위치, 고용주, ​​링크
   
   
   5. 별
      
      비. 네트워크 ID
   
   
   6. 팔로워
   
   
   7. 수행원
   
   
   8. 저장소
   
   
2. 그들은 무엇을합니까?
   ㅏ. 조직
3. 그들은 무엇을하고 있었습니까?
   ㅏ. 고정 리포지토리
   비. 활동

영감

Dribbble에서 나를 끌어들인 몇 가지 이미지 가져오기:

어제 집으로 돌아가는 비행기에서 내가 채찍질한 초보자용 스케치 파일 이 있습니다. 문제에서 현재 사용하고 있는 흰색 배경 스타일을 고수해야 합니다.

멋진 물건! 나는 그 중앙 프로필 사진, 원형 프레임에 대해 정말 😍😍😍 .. 깔끔하고, 우아하고, 침착합니다. #2127 또는 위의 Antony Marshal에 있는 Huddie 디자인의 EG.

@rnystrom 스케치 파일 작업. 내 원래 생각의 일부를 병합합니다. @BrianLitwin 이 디자인이 그 자리를 차지하게 되어 매우 기쁩니다. 이전 디자인을 다시 게시하지 않겠습니다.

이번 주말에 저는 와이어프레임을 더 쉽게 만들기 위해 템플릿화된 Sketch 문서를 만들기 시작했습니다. 공유 가능한 구성 요소에 색상, 텍스트 및 아이콘이 있습니다. app.zip

완전히 완전하지는 않지만 일부 디자인 언어와 함께 도움이 될 수 있으므로 플래그를 지정합니다.

cc @ cieslakdawid

@Huddie 몇 가지 즉각적인 생각:

• 나는 중앙 프로파일 디자인의 팬이 아닙니다. b/c는 사용하지 않는 공백이 없는 iPad에서는 잘 확장되지 않습니다. 나는 숨을 쉴 수 있는 공간에 관한 모든 것이지만 규모를 확장하면 너무 과도할 것이라고 생각합니다.
• 버튼 디자인이 앱의 나머지 부분과 일치하지 않습니다.
  
  
  
  • 여러 개의 굵은/대조 버튼: "팔로잉"과 "최근"의 가중치가 같은 이유는 무엇입니까?
  
  
  • "팔로우"는 "언팔로우"여야 합니다(GitHub.com과 동일).
  
  
  • 앱에 완전히 일관된 버튼 디자인이 없다는 것도 인정합니다. Sketch 파일에 추가하고 모든 것을 일관성 있게 만드는 또 다른 템플릿이어야 합니다! 그라디언트 토론으로 돌아가서 (아마도 우리는 GitHub의 모든 것과 같은 전체 그라디언트 버튼으로 갈 것입니다...)
  
  
• 모든 것에 양식 제목이 필요합니까? 예를 들어 "bio"는 아마도 불필요할 것입니다.
• 뷰에서 사용자 핸들을 없애고 탐색 항목 제목으로 만들고 싶습니다.

GitHawk의 프로필 1.0에서 수행해야 하는 작업을 요약해야 합니다.

누군가의 GitHub 프로필을 볼 때 가장 일반적으로 취하는 작업은 무엇입니까? 저를 위해 저는 그들이 일하는 곳을 확인하고 웹사이트/연락처 정보를 찾거나 그들이 얼마나 "주목할만한"인지 확인합니다(팔로워, 그들이 소유한 큰 프로젝트)

이 작업을 수행하면 해당 작업만 만족하는 기능에만 집중하고 나머지는 나중에 무시할 수 있습니다. 그렇지 않으면 우선순위가 아닌 복잡한 기능을 많이 추가할 것입니다(예: 기여 활동).

@rnystrom

• 아이패드 디자인
  나는 iPhone에서 중앙의 모양이 좋다고 생각합니다. iPad가 매우 개방적으로 보일 수 있다는 말의 의미를 알겠습니다. 나는 iPad에서 GitHawk를 시도한 적이 없지만 레이아웃이 항상 동일합니까? 나는 iPad에서 이름과 핸들(또는 우리가 대체하는 것)이 수직으로 쌓이는 것이 아니라 수평으로 되도록 제안합니다.

• 버튼 일관성
  정말 대략적인 스케치를 하려고 했고, 불일치 ATM이 많이 있을 것이라고 확신하지만 이 경로를 따라 가면 수정하겠습니다.

• 양식 제목
  "팔로잉" 버튼 위의 섹션에는 제목이 없습니다. 일관성을 유지하기 위해 아래 섹션에 있는 부분과 없는 부분이 있으면 별로 좋지 않다고 생각합니다. 바이오를 라인 위로 이동할 수 있지만 아래에 더 잘 맞는 것 같습니다.

• 보기에서 핸들 제거
  물론 보이지 않게 이동할 수 있습니다. 위치/이메일로 대체할 수 있습니다.

• 가장 일반적인 작업
  나는 아마도 몇 가지 일반적인 것이 있다는 데 동의합니다. 고정된 repos + org라고 생각합니다. 그들의 주목할만한 작품을 보여줍니다. 활동을 통해 현재 무엇을 하고 있는지 확인할 수 있습니다. 팔로우/언팔로우는 이름+핸들, 약력과 함께 필수라고 생각합니다. 그리고 메인 보기에 실제로 표시되는 것보다 repo/following 및 팔로워에 대한 빠른 링크가 적절하다고 생각합니다.

• 웹사이트 및 연락처
  나는 이것들이 Action Controller나 뭔가에서 발견될 수 있다고 생각합니다. 모든 GitHub 사용자가 가지고 있는 것으로 기본 보기를 유지하려고 했습니다. (조직 및 약력은 예외). 우리는 항상 그것들을 추가할 수 있습니다.

기여 활동을 제거할 수 있지만 github 모바일 및 github 웹의 프로필 페이지에 있습니다. 개인적으로 마음에 들지만 V1이 꼭 필요하지는 않다는 것을 알 수 있습니다.

네 생각을 말해봐.

장치별 레이아웃을 만드는 것보다 레이아웃을 일관되고 반응적으로 유지하고 싶습니다. 관리하고 테스트하기가 너무 어렵습니다. ATM 장치는 분할 보기 축소 및 확장을 제외하고 모두 동일하게 배치됩니다.

_{GitHawk 와 함께 전송}

좋아, 이름과 (곧 추가될) 위치 + 이메일을 가로로 이동하시겠습니까?

업데이트되었습니다.

나는 여기에서 그런 훌륭한 것을 거의 놓쳤습니다 <3

@rnystrom 주말 전에 와이어프레임 스케치 작업을 더 할 계획이 있습니까?
나는 내 주를 과소 평가했고 starter pack 일정에서 약간 벗어나고 있지만 이번 금요일에 다시 일상으로 돌아가(xCode + Sketch ;) ) 2/3일 안에 끝내고 싶습니다. 중복을 피하기 위해 금요일에 시작하기 전에 작업 상태를 게시합니다.

한 가지 고려 사항은 Sherlouk의 디자인에서와 같이 Repos 및 Starred Repos에 대한 탭을 갖게 된다면 현재 "Repos/Followers/Following" UI는 지금과 같이 상당한 재설계가 필요하다는 것입니다.

너무 많이 앞을 내다보지는 않지만 UI가 1.0에서 더 두드러질수록 나중에 분리하기가 더 까다로워집니다.

Repos 및 Starred Repos 탭이 현재 사용하는 Search Repos ViewController와 다르게 표시되지 않는 한 SearchRepoResult + SearchRepoResultSectionController를 재사용할 수 있으므로 해당 탭을 매우 쉽게 구축할 수 있습니다. Repos와 Starred 모두에 사용할 수 있는 이 보기 컨트롤러 를 참조하세요.

이미 기본적으로 이미 배치된 아키텍처를 표시할 수 있는 아키텍처가 너무 많은데 GitHub 웹 보기에 대한 링크를 구축하는 데 시간을 할애할 이유가 없습니다.

Repo/Followers/Following 버튼은 탭이 아닌 새로운 보기로 안내해야 한다고 생각합니다. 그리고 새로운 뷰는 확실히 네이티브여야 합니다.

그냥 이게 다 이쁘고 내 봉투 그림보다 훨씬 낫다고 😂

@Sherlouk 시작했습니다. 어딘가에서 시작해야 합니다. 감사합니다

_{GitHawk 와 함께 전송}

@cieslakdawid 는 실제로 다음 2주 동안 매우 곤욕을 치른 다음 도시를 떠났습니다.

_{GitHawk 와 함께 전송}

@BrianLitwin 이 프로필 분기를 조정할 수 있도록 이 디자인을 마무리하는 것에 대한 생각이 있습니까? @rnystrom 위의 마지막 디자인 렌더링에 대한 개선을 위한 제안 사항이 있습니까?

@Huddie lemme 는 #317에서 @Sherlouk 의 원래 디자인의 Sketch 프로토타입을 만들어 토론에 넣을 수 있습니다. 며칠 내로 그렇게 할 것입니다.

물론 좋은 소리입니다. 👌🏻

_{GitHawk 와 함께 전송}

아직 Sketch pro가 아니므로 현재로서는 스크린샷이 최선입니다.

@BrianLitwin 은 나에게 좋아 보인다

_{GitHawk 와 함께 전송}

@BrianLitwin 정말 잘봤습니다!!

팔로우/언팔로우가 탐색 모음 항목이거나 작업 컨트롤러에 표시될 수 있습니까?

_{GitHawk 와 함께 전송}

재미있어 보이는 봉투 😂 멋져요!

팔로우/언팔로우 및 공유와 같은 일을 하는 ... 메뉴를 탐색 모음에 가질 계획이었다고 생각합니다.

이 모든 것이 정말 멋집니다. 이 티켓 @brianlitwin에 태그를 지정해 주셔서 감사합니다.

서두를 필요는 없지만 목표는 사용자(게시물과 댓글 전용 피드 포함)와 저장소 모두에 대해 펄스 활동을 하는 것입니다.

현재 이 작업을 하고 있는 사람이 있습니까?

기본 MVP를 얻으려고 할 수도 있습니다. 일단 기초가 마련되면 더 많은 탭과 정보로 그 위에 빌드를 시작할 수 있다고 생각하십시오!

@Sherlouk #2125와 #2113에서 소프트 패스를 가져왔습니다 - 그 prs의 클라이언트/graphql 항목이 유효하다고 생각합니다. 내가 그 부분(몇 백 줄)을 게시하면 홍보를 확인하고 그 위에 빌드할 수 있습니까?

UserProfile 분기를 살펴보고 현재 모양을 확인하겠습니다. 나는 위의 디자인이 좋은 것이라고 생각합니다. 처음에는 최소한의 버전을 얻으려고 하므로 모든 것이 포함된 대규모 MR에 반대되는 것처럼 반복할 수 있습니다!

@Sherlouk 알았어. 그런 다음 UserProfile 분기를 정리하면 최신 상태가 아닌 것 같습니다. 오늘 할게요

@Sherlouk 업데이트: 그 지점은 내가 기억하는 것만큼 창피하지 않습니다. "Profile Models" 폴더 외에 "User Profile" 폴더의 모든 것을 폐기하는 것을 고려할 것입니다. 모델은 Repositories/Repositories Client의 패턴을 매우 밀접하게 따릅니다. 그러나 나는 모든 보기/보기 컨트롤러/섹션 헤더를 버릴 것입니다. 우선 SwiftList ViewController를 사용해야 한다고 생각합니다.

ViewController 전면에서 내가 가진 유일한 강한 느낌은 Starred Repositories 및 User Repositories의 두 탭을 포함하는 것이 매우 쉽고 간단하다는 것입니다. 이미 SearchRepositories 파이프라인의 훌륭한 섹션 컨트롤러와 셀이 있기 때문입니다. 그것들을 가져와서 넣으시면 됩니다.

안녕하세요 여러분 👋 , 저는 디자이너이고 도움을 주고 싶었습니다.

@Sherlouk 및 @BrianLitwin 은 10월 2일에 게시된 디자인 입니다. 현재 작업 중인 작업은 무엇입니까?
나중에 도움이 되는 디자인 지원을 제공할 수 있습니까?

지금은 대략적인 디자인 작업을 할 수 있다고 생각합니다.

• 리포지토리 탭
• 별 탭
• 공유/팔로우 드로어?
• 확장된 Pined Repos

내가 어떻게 도울 수 있는지 알려주세요!

@kocheck 는 이 스레드의 어떤 디자인에도 제약을 받지 않습니다. 내가 아는 합의가 없습니다. 다른 아이디어가 있으면 자유롭게 공유하십시오.

알 겠어! 이번 주말에 좋은 기회를 잡으려고 노력했습니다 감사합니다!

디자인도 기대해주세요! 멋진데

_{GitHawk 와 함께 전송}

안녕하세요 여러분 👋 오늘 아침에 디자인 파일에 뛰어들 시간을 찾았습니다. 이 방향에 대해 어떻게 생각하십니까? 의견이나 피드백이 있습니까?

## 디자인 개요 1
마지막으로 게시된 디자인에 가장 가깝습니다.

업데이트

• ViewController 탭이 아래로 이동되어 조금 더 많은 계층 구조를 제공합니다.
• 약력에 대한 최대 문자 수가 있는 버전이 포함되었습니다.
• Navbar의 메뉴 아이콘을 통해 실행되는 팔로우 및 공유 작업을 액션 시트로 이동했습니다.

| 짧은 약력 | 롱 바이오 | 아이폰 SE |
| :---: | :---: | :---: |
| | | |

디자인 개요 2

이 디자인은 조금 더 나아갑니다. 계속 진행하고 싶으시다면 저에게 알려주세요 😄

업데이트

• ViewController 탭이 아래로 이동되어 조금 더 많은 계층 구조를 제공합니다.
• 약력에 포함된(대략) 최대 문자 수입니다.
  
  
  
  • 약력을 테이블 보기 내부로 이동했습니다.
  
  
• Profile Stats에서 빠르게 통과했습니다.
  
  
  
  • 레포
  
  
  • 팔로워
  
  
  • 수행원
  
  
• 팔로우/언팔로우 버튼 추가
• 팔로우 및 공유 동작을 팔로우 버튼 옆에 있는 메뉴 아이콘을 통해 실행되는 액션 시트로 이동했습니다.

| 언팔로우 | 팔로우 | 아이폰 SE |
| :---: | :---: | :---: |
| | | |

아직 설계 중 / 다음 단계

• 고정된 Repos가 상자 안에 포함된 버전을 탐색하고 싶습니다. @Huddie 가 작성한 이 댓글처럼 . 나는 오히려 그것을 좋아한다.
• 사용자의 펄스 활동 *
• * 저장소에 대한 펄스 활동
• 확장된 상태. 테이블 보기의 항목에 대해
• 리포지토리(탭)
• 별(탭)
• 액션시트

알 수 없음

• 👆iPad 지원에 대한 위의 대화에서 Githawk가 자동 레이아웃 도구로 iPhone SE를 지원한다고 가정하고 있습니다.

• 나는 또한 여기저기서 몇 가지 디자인 가정을 하고 있는데, 뭔가 엄청나게 무서운 것을 발견하면 알려주십시오.

• 펄스 활동에 대한 * , 어리석은 질문이 있습니다. Githawk는 이러한 항목을 Github처럼 표시할까요? 아니면 더 사용자 지정할까요?

@kocheck 계속 탐색해도 되지만 저는 정말 ❤️ 디자인 2.

특히 repo/followers/following을 눈에 잘 띄는 곳에 배치할 수 있어서 기쁩니다. Ryan은 프로필을 스캔할 때 이러한 정보의 우선 순위가 높다고 언급했습니다.

헤더 섹션 아래의 탭이 마음에 듭니다. 다른 사람들은 어떻게 생각합니까?

탭 표시줄을 아래로 이동하는 것이 훨씬 보기 좋습니다 +1

두 번째 디자인의 경우:

• 팔로우/언팔로우는 1번 또는 2번 동작이라고 생각합니다. 상위 뷰의 큰 부분을 차지하는 것으로 보이며 한 번 클릭하면 대부분의 사람들이 변경하지 않을 것입니다.
• Repos가 두 번 나타나는 것 같습니다(탭과 상단 부분)
• 나는 개인적으로 약력이 이름, 위치 등에 첨부되며 다른 사람들이 상단 섹션에 있을 때 하단 섹션에 있어서는 안 된다고 생각합니다.

나는 대부분의 경우 둘 다 좋아합니다. 나는 디자인 1의 짧은 약력이 시작하기에 좋은 장소이고 디자인 2는 우리의 두 번째 버전에 더 살을 붙일 수 있다고 생각합니다.

_{GitHawk 와 함께 전송}

@kocheck 요 너무 좋아보여요! 바를 아래로 옮기는 것을 좋아하고 매우 깨끗합니다!

@Huddie @BrianLitwin 이 나와 함께 악마의 옹호자 역할을 하고 있습니다. GitHub가 작업을 수행하는 데 관한 것이지 누구에 대한 것이 아니기 때문에 다음/기타 개수가 너무 눈에 띄어서는 안 됩니다(예: 옵션 1). 하지만 새로운 사람들을 만날 때 "사회적 자본"과 같은 유용한 지표라고 생각합니다.

나는 또한 Follow를 액션 시트로 옮기는 아이디어를 정말 좋아합니다. 사회적 측면을 제거하고 "이 사람은 누구이며 그들이 하는 일"과 소셜 네트워킹에 초점을 맞추십시오.

내가 여기에서 스스로를 휘젓고 있다는 것을 알고 있지만 일단 디자인 1을 보고 2와 비교하면 2는 Twitter/Instagram이 너무 많고 _작업이 덜한 것 같다는 느낌이 들었습니다.

생각?

나는 또한 @rnystrom으로서 1의 전문적인 측면과 2의 사회적 강조에 기대고 있습니다.

저는 1번 옵션을 더 선호합니다 😄. 그것은 소셜 네트워킹(두 번째 것은 인스타처럼 보입니다)보다는 이 사람이 누구이고 무엇을 하고 있는지에 대한 더 "중요한" 정보를 가리킵니다.
또한 약력을 생략하고 호출기 정보를 위한 공간을 더 확보하는 것이 좋습니다.
또한 이름/사용자 이름과 위치/회사/웹사이트 간에 위치를 전환했을 것입니다. 프로필 사진 오른쪽에 이름/사용자 이름을 보는 것이 더 직관적입니다. (위에서 @BrianLitwin 이 제안한 버전처럼) 😊

_{GitHawk 와 함께 전송}

좋은 피드백 감사합니다! 위의 피드백을 반영하여 몇 가지 구성 요소를 작업할 것입니다.

@jdisho 더 긴 이름에 도움이 되도록 이름/사용자 이름을 위치/회사/웹사이트 등으로 전환했습니다. 조사를 하고 필드를 교환할 수 있습니다. 그 자리에서 엣지 케이스를 멋지게 만들 수 있는지 확인해보세요 😄

_{GitHawk 와 함께 전송}

빠른 업데이트

여전히 물건을 옮기면서 내가 겪고있는 최악의 경우를 공유 할 것이라고 생각했습니다. iPhone SE에서 최대 39개의 캐릭터 이름과 최대 약력을 가진 사용자. 😆

@kocheck 너무 멋져서 이 모든 경우를 처리하고 있습니다!

_{GitHawk 와 함께 전송}

충분히 스크롤할 때 탭이 고정 헤더가 되도록 전체 화면을 스크롤할 수 있습니까? 이는 전체 약력이 모든 탭에서 표시되고 필요한 경우 전체 화면이 저장소로 채워질 수 있음을 의미합니다.

@j-f1 그렇게 생각합니다. 👍

이름/사용자 이름을 위치, 회사 및 연락처 정보와 다시 바꿀 수 있습니다. 화면 높이를 활용하십시오.

휴가를 위해 여행하고 어제 차에 있는 동안 아이디어가 있었다. 오늘 아침에 정말 급하게 만들었습니다. 프로필을 오른쪽으로 옮기는 것에 대해 어떻게 생각하십니까?

• 정보는 사용자가 더 추가하거나 제거함에 따라 아래로 흘러갈 수 있습니다.
• iPad에서 프로필 이미지가 커지면 문제가 발생합니까? 오른쪽의 빈 공간을 채우도록 도와주세요.

@kocheck _멋진_ 것 같아요. 오른쪽에 있는 아이콘이 마음에 듭니다. 전체 인터페이스를 매우 읽기 쉽게 만듭니다.

_{GitHawk 와 함께 전송}

이것은 굉장하다! 다른 주에 kochecks 질문을 다시 방문하여 그는 github이 수행하는 방식을 공유하는 펄스 활동에 대해 질문한 것 같습니다.

Kocheck, 활동이 고정 아래에 있거나 네 번째 탭으로, 또는 오버플로 옵션으로 표시되는 것을 상상하시겠습니까? 당신들이 궁극적으로 중추적인 보기가 아니라는 것을 깨달은 팔로워들과 달리, 적어도 나에게 활동은 프로필에서 가장 중요한 보기입니다.

@ijm8710 여전히 GitHub 문서를 살펴봐야 하지만 해당 데이터를 표시할 수 있다면 개요 탭의 맨 위에 놓고 싶습니다. 👍

우리가 이것을 해결책으로 좋게 생각한다면 어떤 방법으로 배송하거나 ya'll에 제출하는 것이 가장 좋을까요? Zeplin 프로젝트입니까, 아니면 업데이트된 스케치 파일을 사용하여 디자인 리포지토리에 pull 요청을 해야 합니까?

_{GitHawk 와 함께 전송}

슬릭 🤩!!! @쿡체크

@kocheck api.github.com/users/:user/events

@kocheck 디자인 리포지토리 PR은 👌

_{GitHawk 와 함께 전송}

이 스레드에 올라온 이미지가 없습니다. 누구나 가지고 있고 GitHub 첨부 파일로 업로드할 수 있습니까?

@TigPT 라고 생각되는 마스터 스케치 파일에 디자인이 병합되었습니다.

https://github.com/GitHawkApp/Design-Resources

@TigPT 다른 파일 형식이 필요하거나 원하는 경우 알려주시면 해당 파일을 내보낼 수 있습니다.

@TigPT라고 생각되는 마스터 스케치 파일에 디자인이 병합되었습니다.

https://github.com/GitHawkApp/Design-Resources

이제 이미지가 로드되고 있는데, 제 쪽의 네트워크 문제인 것 같고 오프라인 상태라고 잘못 가정했습니다.

Design repo를 지적해 주셔서 감사합니다.

새로운 디자인이 온다? 흥분한!